介绍
在前端开发领域中，使用 Redux 是非常常见的一种状态管理方案。在 Redux 中，reducer 是非常重要的一个概念，它定义了应用中的状态如何响应 action 并更新。在实际项目中，由于 reducer 逻辑复杂且常常需要新增或修改，因此使用一个可重用、可维护的 reducer 创建函数来提高开发效率就非常有必要了。本文将介绍一个名为 @ikhsaan/create-reducer 的 npm 包，该包提供了一种简单、可重用的 reducer 创建函数。
安装
使用 npm 安装 @ikhsaan/create-reducer 十分简单，只需要在终端中输入以下命令即可：
npm i @ikhsaan/create-reducer
使用教程
@ikhsaan/create-reducer 提供了一个名为 createReducer 的函数来创建 reducer，该函数的参数是一个 reducer 配置对象，它包含了 reducer 的各种配置信息。
创建简单的 reducer
下面我们通过一个简单的示例来介绍如何使用 createReducer 来创建 reducer。
假设现在有一个状态为 count 的计数器，我们想要通过 dispatch 向该计数器添加 1 或减去 1。
首先，我们需要定义三个 action：ADD、MINUS、RESET。创建一个名为 countReducer.js 的文件，并定义如下代码：
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------
-- ------ ------ -----
----- --- - ------
----- ----- - --------
----- ----- - --------
-- ------ -------
------ ----- --- - -- -- -- ----- --- ---
------ ----- ----- - -- -- -- ----- ----- ---
------ ----- ----- - -- -- -- ----- ----- ---
-- ------ ------- -----
----- ------------ - -
------ --
--
-- ------ -------
------ ------- --------------
-
------ ----- -- -- ------ ----------- - - ---
-------- ----- -- -- ------ ----------- - - ---
-------- -- -- -------------
--
------------
--在上面的代码中，我们创建了一个 reducer 配置对象，使用 { } 包裹起来定义了 ADD、MINUS、RESET 三个 action。在 reducer 配置对象中，每个 action 均对应一个函数，该函数返回一个新的 state 对象。当 dispatch 一个 action 时，createReducer 将会调用对应的函数并返回一个新的 state 对象。在该示例中，每个函数均会根据当前 state 对象创建一个新的 state 对象，并修改其中的 count 属性。同时，我们还定义了一个名为 initialState 的对象，作为 reducer 的初始状态。
解析 reducer 配置对象
在上面的示例中，我们已经了解了 reducer 配置对象的基本结构和用法。下面我们来详细了解 reducer 配置对象。reducer 配置对象基本结构如下：
{
[ACTION_TYPE]: (state, action) => newStateObject,
[ANOTHER_ACTION_TYPE]: (state, action) => newStateObject
}reducer 配置对象中，键名代表 action type，键值代表一个纯函数，该纯函数接收两个参数：state 和 action，返回一个新的 state 对象。
- state: 当前状态对象
- action: 包含 type 属性的 action 对象
大部分情况下，你可以直接返回一个新的 state 对象。如果你想通过 action 对象来修改状态，则可以使用解构语法。如下所示：
[MY_ACTION_TYPE]: (state, { payload }) => ({
count: payload.count
});使用 combineReducers
在前面的示例中，我们创建了一个简单的 reducer。但是，在实际项目中，我们往往需要定义多个 reducer 来管理不同的模块，因此需要使用 combineReducers 来合并 reducer。
我们可以按照如下步骤来合并 reducer：
- 找到所有需要合并的 reducer，将它们导出；
- 导入 combineReducers 函数，并使用它将所有 reducer 合并为一个 rootReducer；
- 使用 createStore 函数创建 store，并将 rootReducer 作为参数传入。
下面我们通过一个示例来介绍如何使用 combineReducers。假设我们需要管理两个状态：count 和 message，在两个不同的 reducer 中进行管理。
我们需要创建两个 reducer：countReducer 和 messageReducer。首先，我们来创建一个名为 rootReducer.js 的文件，定义如下代码：
import { combineReducers } from "redux";
import countReducer from "./countReducer";
import messageReducer from "./messageReducer";
export default combineReducers({
count: countReducer,
message: messageReducer,
});在上面的代码中，我们使用 combineReducers 函数将 countReducer 和 messageReducer 合并为一个 rootReducer。其中，countReducer 代表了 count 状态的 reducer，messageReducer 代表了 message 状态的 reducer。
指导意义
使用 @ikhsaan/create-reducer 可以提高 reducer 的可维护性和可复用性。通过创建通用的 reducer 创建函数，我们可以将 reducer 从业务逻辑中解耦并提高代码复用性。同时使用 combineReducers 函数可以将多个 reducer 合并为一个 rootReducer，减少了重复代码的编写。
示例代码
- countReducer.js
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------
-- ------ ------ -----
----- --- - ------
----- ----- - --------
----- ----- - --------
-- ------ -------
------ ----- --- - -- -- -- ----- --- ---
------ ----- ----- - -- -- -- ----- ----- ---
------ ----- ----- - -- -- -- ----- ----- ---
-- ------ ------- -----
----- ------------ - -
------ --
--
-- ------ -------
------ ------- --------------
-
------ ----- -- -- ------ ----------- - - ---
-------- ----- -- -- ------ ----------- - - ---
-------- -- -- -------------
--
------------
--- messageReducer.js
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------
-- ------ ------ -----
----- ----------- - --------------
-- ------ -------
------ ----- ---------- - ------- -- -- ----- ------------ -------- - ------- - ---
-- ------ ------- -----
----- ------------ - -
-------- ---
--
-- ------ -------
------ ------- --------------
-
-------------- ------- - ------- -- -- -- -------- --------------- ---
--
------------
--- rootReducer.js
import { combineReducers } from "redux";
import countReducer from "./countReducer";
import messageReducer from "./messageReducer";
export default combineReducers({
count: countReducer,
message: messageReducer,
});来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc2967216659e2441fa