选择器会导致Redux工具箱中不相关组件的重新呈现吗?

Question

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

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

基本思想是，您可以向UserList添加一个用户，或者从UserInformation中显示的列表中选择一个用户。提交的用户和选择的用户由同一存储中的不同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

根据官方文件，我引用:

当一个动作被分派时，useSelector()将做一个引用前一个选择器结果值与当前结果值的比较结果值。如果它们不一样，组件将被迫重新呈现。如果它们是相同的，组件将不会重新渲染。

所以我期待，当我选择一个用户调度一个动作在userReducer也会导致重新呈现UserList(因为submittedUserSelector返回一个对象)。然而，这并没有发生。

为什么?redux-toolkit是否能够找出树中哪些组件使用特定的选择器并仅对其进行评估?文档里有吗?

Answer 1

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

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

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