Redux 的选择器 - Javascript

Redux是一个用于JavaScript应用程序的可预测状态容器。Redux的核心理念是应用程序的整个状态都被存储在一个单一的状态树中。Redux的选择器是一种可以对存储在Redux存储中的状态进行快速计算的工具。相对于纯粹地直接连接整个存储或执行非常复杂的计算，选择器可以根据特定的状态子集仅仅计算必要的值。

编写一个Redux选择器

Redux选择器可以被认为是一个方法，该方法从Redux存储中获取一个状态子集并执行某种计算。Redux选择器的基础示例通常看起来像这样：

const someSelector = (state) => {
  /* ... do some computation on the state ... */
  return someComputedValue;
};

在上面的示例中，Redux选择器接收到Redux存储的整个状态对象，并执行与该状态相关的某些计算。选择器一般会返回一个计算出来的值。

纯函数

Redux选择器必须遵循Redux的使用规则，即必须是纯函数。纯函数没有任何副作用，也不改变其输入。Redux使用纯函数的主要好处是可以提高性能。

以下是一个纯函数例子：

const somePureFunction = (input) => {
  const output = input + 1;
  return output;
};

在上面的示例中，输入参数不会被修改，并且输出参数的计算结果只由输入参数决定。这是一个纯函数。Redux选择器必须是纯函数。

createSelector方法

Redux库提供了一个名为createSelector的方法，该方法可以帮助我们创建高效的选择器。

import { createSelector } from 'reselect';

const someSelector = createSelector(
  (state) => state.someValueA,
  (state) => state.someValueB,
  (someValueA, someValueB) => {
    /* ... do some computation on someValueA and someValueB ... */
    return someComputedValue;
  }
);

使用createSelector方法，我们可以将多个依赖项传递给选择器。在上面的示例中，该选择器依赖于someValueA和someValueB。当创建选择器时，我们将这些依赖项作为函数传递，并传递出一个函数来执行计算。

createSelector方法会将选择器的计算结果缓存下来，并仅在其中一个依赖项发生变化时才重新执行计算。这提高了选择器的性能，因为它避免了不必要的计算。

结论

Redux选择器是Redux存储状态的计算工具，它可以让您快速计算状态子集中的值，而不必计算整个状态。Redux库提供了createSelector方法，帮助我们创建高效的选择器。选择器必须是纯函数。

参考资料：

• https://redux.js.org/recipes/computing-derived-data
• https://github.com/reduxjs/reselect#api-documentation