如何防止redux状态更改时的额外挂钩调用

Question

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

在钩子内部，我使用redux存储(仅用于读取值(：

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

其中使用的TypedSelector代码是：

const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

其中TypedUseSelectorHook和useSelector钩子来自react redux，RootState是我的一种根减少器。

我得到了以下实际结果：如果redux存储发生更改，则该更改会触发意外的useNavigation钩子调用。

但我的预期结果是：useNavigation钩子使用redux存储来读取值，但它们不会在更改时触发useNavigationhook调用。

如何防止redux状态更改时的额外挂钩调用？

Answer 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
}