介绍
在前端开发中，数据管理是一个绕不开的难题。而 Redux 是一个优秀的解决方案，它通过使用单一源数据，使得你可以统一管理你的应用程序的状态，并保证程序的稳定性以及可维护性。然而，随着 Redux 应用程序越来越庞大，我们的 reducer 文件也越来越臃肿，难以维护。这时，redux-meta-reducer 包就应运而生了，它可以帮助你减少你的 reducer 的复杂性，以及让你的代码更加易于维护。
安装
你可以使用 npm 来安装 redux-meta-reducer 包：
npm install redux-meta-reducer
使用
redux-meta-reducer 包提供了一个 MetaReducer 类， 为了使用 MetaReducer 类，我们需要使用它的 extend 函数，将我们的业务 reducer 作为参数传入，然后我们将得到一个 mixin 对象，这个 mixin 对象可以使用在我们的 reducer 之上。
考虑如下业务场景，在我们的 Redux 应用中，我们有一个 task reducer，它负责处理任务相关的 state 和 action，下面是 task reducer 的代码：
-- -------------------- ---- -------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- - --- ---------- ----- ------------ ---------- ----- ---
---- --------------
------ ---------------- -- ------- --- --------- - - -------- ---------- --------------- - - ------
--------
------ ------
-
--当任务数增加的情况下，taskReducer 的代码会变得越来越复杂，难以维护，现在就可以使用 MetaReducer 类来解决这个问题，在这个例子中，我们将使用 redux-meta-reducer 包来创建一个 MetaReducer 对象。
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
----- ----------- - ------- ------- -- -
------ ------------- -
---- -----------
------ ---------- - --- ---------- ----- ------------ ---------- ----- ---
---- --------------
------ ---------------- -- ------- --- --------- - - -------- ---------- --------------- - - ------
--------
------ ------
-
--
----- --------------- - ------------------------------- -
--------- -----
----- -----
------------- --
---在上面的代码中，我们首先导入了 MetaReducer 类，在 taskReducer 中定义了初始化 state 和 action 处理逻辑，然后使用 MetaReducer.extend 函数将这个 reducer 作为参数传入，同时指定了支持 undoable 和 sync 的配置，这里的意思是将这个 reducer 设定为支持撤销操作和同步到服务器，最后我们得到一个 TaskMetaReducer 对象，这个对象可以使用在我们的 reducer 之上。
接下来，我们只需要使用 TaskMetaReducer 就可以让它管理我们的任务状态了：
import { combineReducers } from 'redux';
import { TaskMetaReducer } from './reducers/taskMetaReducer';
const rootReducer = combineReducers({
tasks: TaskMetaReducer.reducer
});
export default rootReducer;在上面的代码中，我们将 TaskMetaReducer.reducer 作为 sub-reducer 传入 combineReducers 函数中，然后导出 rootReducer。我们现在就可以使用 redux-meta-reducer 包管理我们的应用程序状态了。
示例代码
让我们来看一个更复杂一点的示例，一个以 ToDoList 为例的应用程序。我们需要来处理任务和标签两种数据类型，任务和标签之间是具有多对多的关系。下面是一个完整的示例：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
------ - --------------- - ---- --------
------ - -- -- ------ - ---- -------
-- -- -------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- -
--- ----------
----- ------------
---------- ------
----- --
---
---- --------------
------ ---------------- -- ------- --- --------- - - -------- ---------- --------------- - - ------
---- ------------------
------ ---------------- -- -
-- -------- --- -------------- -
------ -----
-
------ -
--------
----- -------------- -----------
-
---
---- -----------------------
------ ---------------- -- -
-- -------- --- -------------- -
------ -----
-
------ -
--------
----- ---------------------- -- --- --- -----------
-
--
--------
------ ------
-
--
-- -- -------
----- ---------- - ------ - --- ------- -- -
------ ------------- -
---- ----------
------ ---------- -
--- ----------
----- -----------
---
---- -------------
------ ------------------ -- ------ --- -----------
--------
------ ------
-
--
-- ------- -------
----- -------------- - ------ - --- ------- -- -
------ ------------- -
---- ------------------
------ ---------- -
------- --------------
------ ----------
---
---- -----------------------
------ ---------------------- -- -------------- --- ------------- -- ------------- --- -----------
--------
------ ------
-
--
-- -----------
----- --------------- - ------------------------------- -
--------- ---- -- -- --------
---
-- -----------
----- -------------- - ------------------------------ -
--------- ---- -- -- --------
---
-- -----------
----- ------------------ - ---------------------------------- -
--------- ---- -- -- --------
---
----- ----------- - -----------------
------ ------------------------
----- -----------------------
--------- --------------------------
---
------ ------- ------------
-- ------ --------
------ ----- ------- - ------ -- --
----- -----------
--- ---------
----
---
------ ----- ---------- - -------- -- --
----- --------------
--- ------
---
------ ----- ------------ - -------- ------ -- --
----- ------------------
-------
-----
---
------ ----- ----------------- - -------- ------ -- --
----- -----------------------
-------
-----
---
------ ----- ------ - ------ -- --
----- ----------
--- ---------
----
---
------ ----- --------- - ------- -- --
----- -------------
--- -----
---在上面的代码中，我们使用了 redux-meta-reducer 包的 MetaReducer 类来管理任务 reducer、标签 reducer 和 tag-task reducer。这个应用程序的 state 是一个包含 tasks，tags，和 tagTasks 三个子 state 的对象，我们通过 combineReducers 函数将这三个子 reducer 合成了一个 rootReducer。
总结
redux-meta-reducer 包是一个非常实用的工具，它可以极大地简化我们的 reducer 代码，让代码易于理解和维护。通过使用 MetaReducer 对象，我们可以轻松地在 Redux 应用程序中集成 undoable 和 sync 等功能，并且减少 reducer 的复杂性。当你的 Redux 应用程序变得越来越庞大的时候，redux-meta-reducer 包可以帮助你更好地管理你的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b1d