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

Question

我正在研究 Redux 工具包并做了一个简单的项目来更好地理解它的概念。

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

基本思路是，您可以将用户添加到 UserList 或 select 列表中的用户，该列表将显示在 UserInformation 中。已提交和 selected 用户均由同一商店中的不同 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 我引用：

When an action is dispatched, useSelector() will do a reference comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render.

所以我期待当我 selected 一个用户在 userReducer 中调度一个动作也会导致重新渲染 UserList（因为 submittedUserSelector returns 一个对象）。然而，这并没有发生。

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

Answer 1

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

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

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

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

Do selectors cause re-rendering on unrelated components in Redux toolkit?

reactjs

redux

redux-toolkit