Question

在带有mapStateToProps, mapDispatchToProps的React类组件中，每个传入状态/调度道具都易于通过PropTypes进行类型检查。

在重写mapStateToProps -> useSelector和mapDispatchToProps -> useDispatch时，我再也看不到任何进行原型检查的地方。除非我用PropTypes.checkPropTypes()手动检查原型。

我想从父组件进行道具的原型检查比从Redux进行道具检查更为重要，但是我仍然想知道是否有人有好的解决方案。

Answer 1

当您在组件中调用connect()时，您正在做的是创建HOC或高阶组件。您在其中调用connect()的该组件“包装”。然后，HOC将道具作为props对象传递给包装的组件。

该对象的成员可以依次由prop-types之类的程序包进行类型检查。这里的问题是，使用钩子时，您不再需要包装所有组件。当函数运行时，您将在函数主体中获得状态。这意味着您使用的值不再是“ prop”。

不幸的是，没有便捷的方法可以自动对JavaScript中的值进行类型检查。可以添加TypeScript或Flow，但是可以在整个文件中进行每个变量/函数返回的类型检查。也许这就是您想要的，但这会增加很多开销。

Answer 2

我将PropTypes.checkPropTypes用于useSelector挂钩。它对我有用。

const { title, loggedIn } = withPropsValidation(
 useSelector(state => ({
   title: state.title, 
   loggedIn: state.loggedIn
})))

const withPropsValidation = props => {
  PropTypes.checkPropTypes(propTypes, props, 'prop', '')
  return props
}

const propTypes = {
  title: PropTypes.string.isRequired,
  loggedIn: PropTypes.bool.isRequired,
}

https://github.com/facebook/prop-types#proptypescheckproptypes

Answer 3

同一个问题，队友，希望有人回答。祝你有美好的一天！

如何将Redux的useSelector和useDispatch挂钩与PropTypes一起使用

3 个答案: