redux-make-reducer 是一个在 Redux 应用程序中帮助解决拆分 reducer 模板的工具。它帮助开发人员将 reducer 拆分成多个文件，提高代码组织性和可重用性。本篇文章将介绍如何使用 redux-make-reducer 包，详细讲解它的优缺点，并提供一个示例代码。
安装
--- ------- ------------------ ------
如何使用
假设我们有一个 reducer 模板，用来处理用户相关的操作。例如，更新用户资料、更新用户状态（在线与否），获取用户好友列表等。
我们可以将这个 reducer 模板拆分为以下几个文件：
user.js：处理用户资料更新status.js：处理用户在线状态更新friends.js：处理用户好友列表获取
接下来我们可以创建一个新文件 index.js，用来组合三个拆分出来的 reducer：
------ - --------------- - ---- --------
------ ----------- ---- ---------------------
----- -------------- - --------------------- ----- ---------
----- -------- - --------------------------------------------------- --------- -- -
-- --------- --- ------------- -
------ --------------
-
----- ---------- - --------------------- -------------------
----- --------- - --------------------------
-------------------------- - ----------
------ ---------------
-- ----
----- ----------- - ----------------------
------ ------- ------------上面的代码使用了 Webpack 的 require.context() 方法，自动导入当前目录下的所有 js 文件作为各个子 reducer，最后将所有的子 reducer 通过 makeReducer 合并成一个 rootReducer。
我们还需要在 store.js 中引入 index.js：
------ - ----------- - ---- -------- ------ ----------- ---- ------------------- ----- ----- - ------------------------- ------ ------- ------
现在我们已经成功将一个庞大的 reducer 模板拆分成了多个小的 reducer，将它们再通过 redux-make-reducer 合并成了一个完整的 rootReducer。接下来就可以在项目的任何地方使用 store.dispatch() 方法来更新 store 中的数据了。
优点和缺点
redux-make-reducer 有以下优点：
- 拆分 reducer，提高代码组织性和可维护性。
- 按模块设计 reducer，增强了重用能力。
makeReducer方法提供了极其方便的合并方式，极大简化整个项目的编写流程。
redux-make-reducer 的缺点：
- 拆分的过程需要思考项目拆分规则，增加项目的复杂度。
- 动态导入 reducer 依赖 Webpack 等工具，可能不适用于其他环境。
示例代码
user.js
------ - ------------- ------------- - ---- ----------------
------ ----- ---------- - ----------------------------
----- ----------- - --------------
-
------------------- ------- -
----- - ------- - - -------
------ - --------- ---------- --
--
--
---
--
------ ------- ------------status.js
------ - ------------- ------------- - ---- ----------------
------ ----- ------------ - ------------------------------
----- ------------- - --------------
-
--------------------- ------- -
----- - ------- - - -------
------ - --------- ---------- --
--
--
- ------- ----- --
--
------ ------- --------------friends.js
------ - ------------- ------------- - ---- ----------------
------ ----- ------------- - --------------------------------
------ ----- ---------------- - -----------------------------------
----- -------------- - --------------
-
---------------------- ------- -
----- - ------- - - -------
------ - --------- ------------- ------- --
--
------------------------- ------- -
----- - ------- - - -------
----- -------- - - -------- --
------ ------------------
------ ---------
--
--
---
--
------ ------- ---------------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067008e361a36e0bce8aeb