如何高效地选择一个 redux store slice

编程问答 2022-05-17

问题描述

在 React/Hooks/ReduxToolkit 应用程序中，以下两种方法选择 redux store 的一个切片对效率有何影响：

商店结构：

常量存储：RootState = { 学生， 课程， }

students 是由他们的 id 索引的学生字典......即 学生: [id: number]: 学生 同样，courses 是由id

索引的课程字典

在只关心呈现 student 信息的组件中，直接选择组件中的相关切片与创建组件随后调用的记忆化选择器对性能有何影响？

案例1（直接在组件中选择切片）：

const StudentReactComponent = () => {
const allStudents = useSelector((state: RootState) => state.students)

...
return some render logic that makes use of `allStudents`
...
}

案例 2（通过记忆选择器选择切片）：

// This memoized selector would actually be imported from a `studentSelectors`
// module instead of being declared above the react component
const selectStudentsDictionary = createSelector((state: RootState) => state.students,students => students)

const StudentReactComponent = () => {
const allStudents = useSelector(selectStudentsDictionary)
...
return some render logic that makes use of `allStudents`
...

解决方法

useSelector 强制组件在选择器返回与先前引用不同的新引用时重新渲染： https://react-redux.js.org/api/hooks#equality-comparisons-and-updates 。因此，正如所写的那样，每当 state.students 发生变化时，组件都会重新渲染。

这个例子中的“memoized”选择器实际上是没有用的。只有当您拥有派生数据时，记忆才重要。任何时候您的 createSelector 实例只有 x => x 作为其“输出选择器”，您都以错误的方式使用 createSelector，这可能只是一个普通函数。

作为相关的旁注，我实际上计划在不久的将来为 Redux 核心文档编写一个新的“选择器和记忆”使用指南页面。在此之前，我建议通读我的帖子 Using Reselect Selectors for Encapsulation and Performance。它已经有几年的历史了，但在这里仍然很重要。

react-hooksreactjsreactjsreactjsreactjsreduxreduxreduxreduxredux-toolkitreselectreselectreselect