在使用 Redux 进行前端应用开发时，我们需要编写 Reducer 函数来响应不同的 Action 并返回新的 State。在一些场景下，我们需要编写一个由多个 Reducer 函数组合而成的复杂 Reducer。Redux-Reducer-Composers 是一个方便的 npm 包，可以轻松地实现 Reducer 函数的组合，让我们更方便地管理和编写 Redux 的应用程序。
安装 Redux-Reducer-Composers
Redux-Reducer-Composers 可以通过 npm 安装：
npm install redux-reducer-composers
创建 Reducer
在开始使用 Redux-Reducer-Composers 之前，我们先来创建几个简单的 Reducer 函数。
-- -------------------- ---- -------
----- ----- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ -
---------
-
--- ----------
----- ------------
---------- -----
-
-
---- --------------
------ -------------- --
-------- --- ----------
- --------- ---------- ----------------
- ----
-
--------
------ -----
-
-
----- ---------------- - ------ - ----------- ------- -- -
------ ------------- -
---- ------------------------
------ -------------
--------
------ -----
-
-上述代码定义了两个简单的 Reducer 函数，其中 todos 函数用于管理待办事项列表，visibilityFilter 函数用于管理过滤器的状态。
组合 Reducer
Redux-Reducer-Composers 提供了多种组合 Reducer 函数的方式，这里我们介绍其中的 withReducer 和 allReducers 函数。
withReducer
withReducer 函数用于将一个 Reducer 函数与指定的 statePath 组合。它的使用方式如下：
import { withReducer } from 'redux-reducer-composers'
const todoApp = withReducer('todos', todos, {visibilityFilter})withReducer 函数接收三个参数：
- statePath: 作为该 Reducer 函数所负责的状态路径；
- reducer: Reducer 函数；
- initialState: Reducer 函数的初始状态，可以是一个对象，也可以是一个函数。
在上述代码中，todoApp 即为组合后的 Reducer 函数，它将 todos 函数与 visibilityFilter 函数组合起来，todos 函数负责管理 state 里的 todos 状态，visibilityFilter 函数负责管理 state 里的 visibilityFilter 状态。
allReducers
allReducers 函数用于组合多个 Reducer 函数。它的使用方式如下：
import { combineReducers } from 'redux'
import { allReducers } from 'redux-reducer-composers'
const todoApp = combineReducers(allReducers(
{todos},
{visibilityFilter},
))allReducers 函数接收多个对象参数，每个对象都包含一个 Reducer 函数和一个可选的 statePath 属性。如果其中某个对象不包含 statePath 属性，则默认使用它的 Reducer 函数名作为 statePath。
在上述代码中，todoApp 即为组合后的 Reducer 函数，它将 todos 函数和 visibilityFilter 函数组合起来，并且默认使用函数名作为 statePath。
用于案例中
接下来我们通过两个案例来更好的理解如何使用 Redux-Reducer-Composers：
案例一：Redux 计数器
在这个案例中我们使用 Counter 组件作为计数器，该组件包含增加、减少、重置按钮。通过点击不同的按钮可以改变该组件的状态，从而改变应用程序的状态。
首先我们来定义 Reducer 函数：
-- -------------------- ---- -------
-- ---------- --
----- ------------ - - ------ - -
----- -------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - -
---- ------------
------ - ------ ----------- - - -
---- --------
------ - ------ - -
--------
------ -----
-
-
------ ------- --------------接下来我们使用 withReducer 函数创建一个计数器的组件：
-- -------------------- ---- -------
-- ---------- --
------ ----- ---- -------
------ - ----------- - ---- -------------------------
------ -------------- ---- -----------
----- ------- - -- ------ -------- -- -- -
----- --------------- - -- -- ---------- ----- ----------- --
----- --------------- - -- -- ---------- ----- ----------- --
----- ----------- - -- -- ---------- ----- ------- --
------ -
-----
------------ ------------
------- --------------------------------------------
------- --------------------------------------------
------- ------------------------------------
------
-
-
------ ------- ---------------------- --------------- --------在 Counter 组件中我们调用了 dispatch 函数，用于派发不同的 Action 驱动 Reducer 对应的 state 更新。
案例二：Redux TodoList
在这个案例中我们从 TodoList 的场景出发，使用了 allReducers 函数组合多个 Reducer 函数来管理项目。该案例包含一些常用的 Todo 功能，比如添加 Todo、删除 Todo 等。
我们首先来定义一些 reducer 函数：
-- -------------------- ---- -------
-- ----------- --
------ ----- ----- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ -
---------
-
--- ----------
----- ------------
---------- -----
-
-
---- --------------
------ -------------- -- -
-- -------- --- ---------- -
------ ----
-
------ -
--------
---------- ---------------
-
--
---- --------------
------ ----------------- -- ------- --- ----------
--------
------ -----
-
-
------ ----- ---------------- - ------ - ----------- ------- -- -
------ ------------- -
---- ------------------------
------ -------------
--------
------ -----
-
-接下来我们使用 allReducers 函数组合 reducers 来创建 TodoList 组件：
-- -------------------- ---- -------
-- ----------- --
------ ----- ---- -------
------ - ------------ ----------- - ---- -------------
------ - ----------- - ---- -------------------------
------ - ------ ---------------- - ---- ------------
------ ------- ---- -----------
------ -------- ---- ------------
------ ------ ---- ----------
----- ------- - -- -- -
----- ----- - ------------- -- --
----- -------- - -------------
--- - ------ ---------------- - - -----
----- - ----- -- --
---------------- - ---------------- -- ----------
------ -
-----
--------------
-------- --
--------- ------------- ------------------- --
------- ----------------------------------- ------------------- --
------
-
-
------ ------- ------------- ------ ---------------- -- --------在上述代码中，我们使用了 useSelector 和 useDispatch 注意，同时还要做一些错误处理，保证 todos 和 visibilityFilter 存在。另外，我们还传递了 todos 和 visibilityFilter 作为 state。
总结
Redux-Reducer-Composers 可以帮助我们更方便地管理和组合 Reducer，提高开发效率。使用 withReducer 和 allReducers 函数可以轻松地将多个 Reducer 组合成一个复杂 Reducer，便于管理项目的状态。在以上的案例中，我们使用了不同的方式来使用 Redux-Reducer-Composers，展示了组合 Reducer 的应用场景。希望这篇文章对你的学习和开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728f81e8991b448e8c5a