前端开发中，我们通常使用 Redux 来管理数据状态。而在 Redux 中，我们又经常使用 selector 来获取 store 中的数据。如果有多个 selector 需要组合使用，那就需要使用 combineSelectors 方法。而 npm 包 combine-selectors-redux 就是一个很好的工具来帮助我们更方便地使用 combineSelectors 方法。

安装

npm install combine-selectors-redux --save

使用

首先，我们需要引入 combineSelectors 方法以及我们需要组合使用的 selector。

import { combineSelectors } from 'combine-selectors-redux';
import { createSelector } from 'reselect';

接着，我们通过 createSelector 来定义我们需要组合使用的 selector。

-- -------------------- ---- -------
----- -------- - ----- -- ------------
----- --------- - ----- -- -------------

----- --------------- - ---------------
  ---------- -----------
  ------- ------- -- -
    ------ -------- -
      ---- -----------
        ------ ------
      ---- -----------------
        ------ -------------- -- -------------
      ---- --------------
        ------ -------------- -- --------------
      --------
        ----- --- -------------- ------- - - --------
    -
  -
--

最后，我们通过 combineSelectors 将两个 selector 组合在一起。

const getVisible = combineSelectors(getVisibleTodos, state => state.loading);

const mapStateToProps = state => {
  return {
    visibleTodos: getVisible(state)
  }
}

示例代码

下面是一个完整的示例代码，你可以将它添加到你的项目中进行测试。

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------------- - ---- --------------------------
------ - -------------- - ---- -----------

----- -------- - ----- -- ------------
----- --------- - ----- -- -------------

----- --------------- - ---------------
  ---------- -----------
  ------- ------- -- -
    ------ -------- -
      ---- -----------
        ------ ------
      ---- -----------------
        ------ -------------- -- -------------
      ---- --------------
        ------ -------------- -- --------------
      --------
        ----- --- -------------- ------- - - --------
    -
  -
--

----- ---------- - --------------------------------- ----- -- ---------------

----- -------- ------- --------------- -
  -------- -
    ------ -
      ----
        --------------------------------- --
          --- --------------
            -----------
          -----
        --
      -----
    --
  -
-

----- --------------- - ----- -- -
  ------ -
    ------------- -----------------
  -
-

------ ------- -----------------------------------

这段代码中，我们定义了两个 selector：getTodos 和 getFilter。然后，我们使用 createSelector 创建了一个名为 getVisibleTodos 的新 selector，它将 getTodos 和 getFilter 的结果作为输入，根据过滤条件返回一个新的 todo 列表。

最后，我们使用 combineSelectors 将 getVisibleTodos 和一个新的 selector 组合在一起，以便在 mapStateToProps 函数中使用。最终，我们将 visibleTodos 作为 props 传递给 TodoList 组件，以便渲染 todo 列表。

结语

使用 combineSelectors-redux 可以让我们更方便地组合多个 selector，提高代码的可维护性和可读性。当你需要组合多个 selector 时，可以考虑使用这个 npm 包来简化你的代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d881e8991b448e49aa