带有条件语句的 Redux useSelector

Posted 2023-02-19

【中文标题】带有条件语句的 Redux useSelector

【英文标题】：Redux useSelector with Conditional statement

【发布时间】：2020-08-18 04:44:05

【问题描述】：

我需要获取 Redux 存储数据，但并非总是如此，并且每个组件实例化的数据都不同。 如何在条件语句中使用 useSelector？

只有在渲染某些子组件时，组件才应该从 store 中获取数据，并且每次根据子组件的不同而获取不同的数据。

【参考方案1】：

useSelector 接受一个可以访问 redux 状态的回调作为参数

因此，假设您控制子组件是否在名为 isComponentRendered 的布尔标志中呈现，并且希望在它为 true 时选择数据，否则您可以尝试以下操作：

const data = useSelector(state => 
   if(state.isComponentRendered) 
       return state.data
   
   return null;
)

【讨论】：

我认为这是一种解决方法。将 if 放入 useSelector 是一种好习惯吗？

useSelector 是一个钩子，因此在 if 语句中调用它会违反反应钩子规则。更多信息请参考react docs。这样一来，您就可以将上述代码作为组件中唯一应用条件逻辑的地方。