React页面如何不通过props获取Redux-Saga管理的新集合数据？

当然有办法啦！既然你已经为头像集合配置好了对应的reducer、action和watcher，在函数组件里完全可以不用props就能拿到Redux Store里的profilePics数据，React-Redux提供的useSelector钩子就是最适合的方案，这也是函数组件中获取Redux状态的推荐方式。

具体步骤： #

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

   import { useSelector } from 'react-redux';
   

2. 在组件内部获取profilePics数据
   在你的profileEdit组件里，直接通过useSelector从Redux Store中提取需要的状态。注意要根据你实际的reducer结构调整state的路径——比如如果你的头像reducer是挂载在Store的profilePics根键下，就这么写：

   const profilePics = useSelector(state => state.profilePics);
   

   如果你的reducer是合并在某个嵌套路径下（比如state.user.profilePics），记得修改对应的路径。

3. 修改后的完整组件代码
   整合之后你的组件代码会变成这样：

   import { useSelector } from 'react-redux';
   
   export default function profileEdit(props) {
     // 通过props传入的数据
     const { stats, weapons, armor, readOnly } = props;
     // 直接从Redux Store获取profilePics，无需props
     const profilePics = useSelector(state => state.profilePics);
   
     return (
       <div>
         {/* 这里就可以直接使用profilePics了 */}
       </div>
     )
   }
   

额外说明： #

• useSelector会自动订阅Redux Store中对应状态的变化，当profilePics更新时，你的组件会自动重新渲染并拿到最新数据。
• 如果你之前是通过connect高阶组件来映射props的，现在用useSelector可以让代码更简洁，避免不必要的props传递。

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