如何使用 Redux 的 useSelector 和 useDispatch 钩子与 PropTypes

Question

在具有 mapStateToProps, mapDispatchToProps 的 React class 组件中，每个传入的 state/dispatch prop 很容易使用 PropTypes 进行类型检查。

重写 mapStateToProps -> useSelector 和 mapDispatchToProps -> useDispatch 时，我不再看到任何合乎逻辑的位置来进行 proptype 检查。除非我用 PropTypes.checkPropTypes().

手动检查 proptypes

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

Answer 1

当您在组件中调用 connect() 时，您所做的就是创建一个 HOC 或高阶组件。您在其中调用 connect() 的组件 "wraps"。 HOC 然后将 props 作为 props 对象传递给包装的组件。

此对象的成员可以依次由 prop-types 等包进行类型检查。这里的问题是，当使用钩子时，您根本不再包装组件。当函数运行时，您正在函数体中派生状态。这意味着您使用的值不再是 "prop"。

遗憾的是，JavaScript 中没有方便的自动类型检查值的方法。可以添加 TypeScript 或 Flow，但这会为整个文件中的 every variable/function return 带来类型检查。也许这就是您想要的，但它会增加很多开销。

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

如何使用 Redux 的 useSelector 和 useDispatch 钩子与 PropTypes

How to use Redux' useSelector and useDispatch hooks with PropTypes

reactjs

react-redux

react-proptypes

react-hooks