reducermanger 是一款可以帮助开发者管理 Redux store 中的 reducer 的 npm 包。它允许你以模块化的方式编写 reducer，并且可以自动合并为一个大的 reducer。
在本篇文章中，我们将会详细介绍如何使用 reducermanger，包括安装、配置、编写 reducer 等方面，并提供一些示例代码和注意事项。
安装
要安装 reducermanger，请在终端中运行以下命令：
npm install reducermanger --save
配置
在使用 reducermanger 之前，你需要先配置你的 Redux store。下面是一个基本的配置示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------- ---- ----------------
-- ---- -------
----- -------- - -
-------- ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
--
-- ---- --------------
----- ---------------------- - -------------------------
-- ----- -------
----- ---------------- - ------------------------------------------------------
-- -- ----- -----
----- ----- - ------------------------------在上面的示例中，我们首先编写了一个 counter 的 reducer，并将它传入 reducerManager 中；然后我们通过 reducerManagerInstance.getReducers() 方法取出所有的 reducer，并使用 combineReducers 合并为一个大的 reducer；最后创建 Redux store，让它使用我们刚刚合并的 reducer。
编写 reducer
要使用 reducermanger，开发者需要将所有的 reducer 都放置在一个文件夹内，并通过 export 的方式导出它们。reducermanger 将会自动扫描这个文件夹并将所有的 reducer 合并为一个大的 reducer。
下面是一个基本的 reducer 示例：
messages.js
-- -------------------- ---- -------
------ ----- ------------ - - ----- --- ---------- ----- --
------ ----- ----------- - --------------
------ -------- -------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ----- --------------- ---------------- ---------- ----- --
--------
------ ------
-
-在上面的示例中，我们首先定义了 initialState 表示上下文的初始状态；然后定义了一个 ADD_MESSAGE 的常量，它将用于创建 action；最后定义了一个 messages 的 reducer 函数，它接受两个参数：state 和 action，并且根据不同的 action 返回不同的 state。
动态加载 reducer
在应用程序运行时，有时需要动态加载某个 reducer，例如当某个功能被打开时，我们才需要加载它对应的 reducer。reducermanger 也可以帮助我们实现这个功能。
下面是一个动态加载 reducer 的示例：
function loadReducer(reducerPath, store) {
import(reducerPath).then(module => {
const { reducer, initialState } = module.default;
store.reducerManager.add(reducerPath, reducer, initialState);
store.replaceReducer(store.reducerManager.getCombinedReducers());
});
}在上面的示例中，我们首先通过 import 动态加载 reducer，并将它们添加到 reducerManager 中；然后使用 store.replaceReducer 方法来使新的 reducer 被 Redux store 所使用。
需要注意的是，在动态加载 reducer 时，我们需要手动指定它的 initialState，因为在使用 import 加载时无法获取到它。
总结
到此为止，我们已经详细介绍了如何使用 reducermanger。它可以帮助开发者管理 Redux store 中的 reducer，让 reducer 的编写更加模块化和易于维护。如果你需要管理大量的 reducer，或者想要更好地组织你的 Redux store，那么 reducermanger 就是你所需要的工具。
有关更多信息，请参阅 reducermanger 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b5681e8991b448e54ec