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

Question

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

重写时mapStateToProps -> useSelector，mapDispatchToProps -> useDispatch我不再看到任何进行属性类型检查的合乎逻辑的地方。除非我用PropTypes.checkPropTypes().

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

Answer 1

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

该对象的成员可以反过来由像prop-types. 这里的问题是，当使用钩子时，您根本不再包装组件。当函数运行时，您正在函数体中派生状态。这意味着您使用的值不再是“道具”。

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