redux-make-reducer 是一个在 Redux 应用程序中帮助解决拆分 reducer 模板的工具。它帮助开发人员将 reducer 拆分成多个文件，提高代码组织性和可重用性。本篇文章将介绍如何使用 redux-make-reducer 包，详细讲解它的优缺点，并提供一个示例代码。
安装
npm install redux-make-reducer --save
如何使用
假设我们有一个 reducer 模板，用来处理用户相关的操作。例如，更新用户资料、更新用户状态（在线与否），获取用户好友列表等。
我们可以将这个 reducer 模板拆分为以下几个文件：
user.js：处理用户资料更新status.js：处理用户在线状态更新friends.js：处理用户好友列表获取
接下来我们可以创建一个新文件 index.js，用来组合三个拆分出来的 reducer：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ ----------- ---- --------------------- ----- -------------- - --------------------- ----- --------- ----- -------- - --------------------------------------------------- --------- -- - -- --------- --- ------------- - ------ -------------- - ----- ---------- - --------------------- ------------------- ----- --------- - -------------------------- -------------------------- - ---------- ------ --------------- -- ---- ----- ----------- - ---------------------- ------ ------- ------------展开代码
上面的代码使用了 Webpack 的 require.context() 方法，自动导入当前目录下的所有 js 文件作为各个子 reducer，最后将所有的子 reducer 通过 makeReducer 合并成一个 rootReducer。
我们还需要在 store.js 中引入 index.js：
import { createStore } from 'redux'; import rootReducer from './reducers/index'; const store = createStore(rootReducer); export default store;
现在我们已经成功将一个庞大的 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
