如何防止对 redux 状态更改进行额外的钩子调用？

【问题标题】：How to prevent extra hook calls on redux state change?如何防止对 redux 状态更改进行额外的钩子调用？
【发布时间】：2021-04-15 08:10:19
【问题描述】：

我有一个自定义钩子：useNavigation()。如果需要，它会返回目标路由以重定向用户。

在钩子里面我使用redux store（只读取值）：

{ prop1, prop2 } = useTypedSelector(state => state.data);

useTypedSelector 代码在哪里：

const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

TypedUseSelectorHook 和 useSelector hooks 来自 react-redux，而 RootState 是我的 root reducer 的一种。

我有以下实际结果：如果 redux store 发生变化，那么这个变化会触发意外的 useNavigation 钩子调用。

但我的预期结果是： useNavigation hook 使用 redux store 读取值，但它们不会触发 useNavigation hook on change。

如何防止 redux 状态变化时产生额外的钩子调用？

【问题讨论】：

【解决方案1】：

您总是希望使用useSelector 选择所需的最少数据量。从useSelector 返回的值的任何更改都将触发重新渲染。

您可以通过分别选择prop1 和prop2 使其稍微好一点，这样state.data 中其他属性的更改就不会触发重新渲染。

const prop1 = useTypedSelector(state => state.data.prop1);
const prop2 = useTypedSelector(state => state.data.prop2);

但我怀疑你可以通过将钩子中发生的一些逻辑移动到自定义选择器函数中来让它变得更好。您可能想使用reselect 来记忆您的选择器。

const selectTargetRoute = (state: RootState) => {
  const {prop1, prop2} = state.data;
  // do some logic
  // return a route or null/undefined
}

const useNavigation = () => {
  const targetRoute = useTypedSelector(selectTargetRoute);
  // do something with the route
}

【讨论】：