如何用useSelector替代Redux中的mapStateToProps？附代码转换需求

直接用React-Redux的useSelector钩子就能替代你原来的mapStateToProps，步骤很简单：

1. 导入useSelector
   首先从react-redux包中导入这个钩子：

   import { useSelector } from 'react-redux';
   

2. 在函数组件内使用useSelector
   你的mapStateToProps本质就是调用productMarksGroupStateSelector选择器从根state中取出productMarksState，用useSelector直接传入这个选择器即可：

   // 在你的函数组件内部
   const productMarksState = useSelector(productMarksGroupStateSelector);
   

3. TypeScript类型处理（可选）
   如果你需要显式指定类型（比如类型推断不生效的场景），可以利用泛型声明根state类型和返回值类型：

   const productMarksState = useSelector<ApplicationState, BasicProductMarksListStore['productMarksState']>(productMarksGroupStateSelector);
   

   不过通常productMarksGroupStateSelector本身已经定义了正确的输入输出类型，TypeScript会自动完成类型推断，不需要额外写泛型。

和connect的方式相比，useSelector写法更简洁，并且会自动订阅store变化，当选择器返回的数据更新时，组件会自动重新渲染，效果和原来的mapStateToProps完全一致。

内容的提问来源于stack exchange，提问作者Yerba Mate