在使用 Redux 管理应用程序状态时，经常会出现将多个存储在 store 中的数据组合起来使用的场景。在这些情况下，使用 Redux selectors 能够提供一种简洁而可靠的方式来获取所需的数据。本文将介绍 Redux 中的 selectors 的作用，以及如何使用 reselect 库来优化它们。
什么是 selectors？
在 Redux 中，selector 是一个函数，用于从 Redux store 中提取所需的数据。例如：
// 一个简单的 selector，从 state 中获取用户信息 const getUser = state => state.user;
selectors 是非常有用的，因为它们可以帮助我们在组件中使用 store 数据时，减少代码的重复和冗余，并且能够提高代码的可读性和可维护性。
reselect 库是什么？
reselect 是一个专门为了提高 selectors 性能的 JavaScript 库。由于 selectors 可能会涉及到大量的计算和数据转换，而且会在每个 store 更新时都被重新计算，因此，reselect 能够通过使用记忆化技术，仅在必要的情况下重新计算 selectors，从而提高性能。
如何使用 reselect？
让我们通过一个具体的例子来看看如何使用 reselect。
假设我们的应用程序有一个 items 列表，每个元素都有一个 quantity 属性。我们想要一个 selector 来返回所有 items 的总数量。这个 selector 可以通过遍历所有 items ，然后将每个元素的数量相加来实现，但这可能会很慢，因为每次 store 更新时，它都需要重新计算。这时，reselect 可以帮助我们计算出增量的结果，只有 items 或 quantity 发生变化时，它才会重新计算。
首先，你需要安装 reselect 依赖：
npm install reselect --save
然后，使用 createSelector 方法创建一个新 selector：
import { createSelector } from 'reselect';
const getItems = state => state.items;
const getTotalQuantity = createSelector(
[getItems],
items => items.reduce((acc, item) => acc + item.quantity, 0)
);如上所述，createSelector 接受两个参数。第一个参数是一个数组，包含一组输入 selector。 第二个参数是一个函数，它将从输入的 selector 中获取结果，并返回该 selector 的结果。createSelector 返回一个新的 selector 函数，它会缓存结果，并在必要时重新计算。 这使得我们可以在组件中多次调用 getTotalQuantity，而不必重新计算规则，而只有在 items 更新时才不可避免地重新计算。
最后，我们可以将这个新 selector 导出到我们的组件中来使用：
import { getTotalQuantity } from './selectors';
const mapStateToProps = state => ({
totalQuantity: getTotalQuantity(state)
});这样我们就能够从 store 中获取到所有 items 的总数量，并且在性能上有了一定的优化。
总结
通过使用 selectors 和 reselect 库，我们能够更加高效地开发 Redux 应用程序。selectors 能够帮助我们更好地组织 store 的数据并提高代码的可读性和可维护性。而 reselect 库能够从性能方面为 selectors 做出优化，从而提升应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c219c383d39b48816384f5