选择器是否会导致 Redux 工具包中不相关的组件重新渲染？答案

【问题标题】：Do selectors cause re-rendering on unrelated components in Redux toolkit?选择器是否会导致 Redux 工具包中不相关的组件重新渲染？
【发布时间】：2021-09-20 09:03:16
【问题描述】：

我正在深入研究 Redux 工具包并制作了一个简单的项目以更好地理解其概念。

function App() {
 //..
 return(
  <UserList /> // uses submittedUserSelector
  <UserInformation /> // uses selectedUserSelector
 );
}

基本思想是您可以将用户添加到UserList 或从UserInformation 中显示的列表中选择一个。提交用户和选中用户都由同一个 store 中的不同 reducer 管理。

export const rootReducer = combineReducers({
    form: formReducer, // have submitted user selector
    user: userReducer // have selected user selector
});

// formReducer.tsx
 export const submittedUserSelector = (state:RootState)=>state.form.submittedUser; //object
// selectedUserReducer.tsx
 export const selectedUserSelector = (state:RootState)=>state.user.selectedUser; //object

According to the official documentation 我引用：

当一个动作被调度时，useSelector() 会做一个引用前一个选择器结果值与当前选择器结果值的比较结果值。如果它们不同，组件将被强制重新渲染。如果它们相同，则组件不会重新渲染。

所以我期待当我选择一个在userReducer 中调度操作的用户时也会导致重新渲染UserList（因为提交的用户选择器返回一个对象）。然而，这并没有发生。

为什么？ redux-toolkit 是否确定树中的哪些组件正在使用特定的选择器并且只评估那些？这是文档中的某处吗？

【问题讨论】：

标签： reactjs redux redux-toolkit

【解决方案1】：

在每次状态更改时都会调用选择器，并且仅在选择器结果从上次渲染发生变化时会导致组件重新渲染 - 因此通常不会重新渲染不相关的组件。

请记住，一般的 React 组件渲染仍然适用 - 如果父组件重新渲染，所有子组件都将被重新渲染。

这与 redux-toolkit 无关——这是 react-redux 钩子的正常行为。见https://react-redux.js.org/api/hooks

【讨论】：