在前端开发中，redux 是一个非常常用的状态管理工具，能够轻松地管理多个组件之间的状态变化。但是，在实际开发中，redux 的代码量十分庞大，频繁的 reducer、action 和 store 的编写和维护会损耗开发者的时间和精力。因此，更为简洁的 redux 管理工具就应运而生了，其中就包括了 npm 包 redux-simplifr。
redux-simplifr 能够让开发者以更为简洁的方式编写 redux 代码，同时保持 redux 原有的优点。本文将详细介绍 redux-simplifr 的使用教程，并附带示例代码。
安装
使用 redux-simplifr 之前，需要先进行安装。在控制台中运行以下命令：
--- ------- ------ --------------
安装完成后，在代码中通过以下方式引入：
------ - ----------- - ---- -----------------
创建 Store
使用 redux-simplifr，可以轻松地创建一个 store。首先，需要定义一个 reducer：
----- -------------- - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
--然后，通过 createStore 创建一个 store：
----- ----- - ----------------------------
在上述代码中，通过 createStore 创建了一个名为 store 的 redux store，通过 counterReducer 定义了其 reducer。
编写 mapStateToProps 和 mapDispatchToProps
在 redux 中，mapStateToProps 和 mapDispatchToProps 是必不可少的。redux-simplifr 不例外。mapStateToProps 用于将 store 中的 state 映射到组件的 props 中；而 mapDispatchToProps 则用于将组件中的操作映射到 store 中的 dispatch 中。
以 Counter 组件为例：
------ ----- ---- --------
------ - ------- - ---- -----------------
----- ------- - -- -------- ------------ ----------- -- -- -
-----
----------- -------------
------- --------------------------------
------- --------------------------------
------
--
----- --------------- - ------- -- --
-------- ------
---
----- ------------------ - -
------------ -- -- -- ----- ----------- ---
------------ -- -- -- ----- ----------- ---
--
------ ------- ------------------------ -----------------------------在上述代码中，通过 connect 将 Counter 组件与 store 进行连接。通过 mapStateToProps 将 store 中的 state 中的 counter 映射到 Counter 组件的 props 中的 counter；通过 mapDispatchToProps 将 Counter 组件中的 onIncrement 和 onDecrement 操作映射到 store 中的 dispatch 中的 type 属性中。
store 的并发处理
在 redux-simplifr 中，有时需要处理 store 中多个 action 的并发请求。此时，可以使用 redux-saga 中的 takeEvery 方法，如下所示：
------ - --------- - ---- -------------------- --------- ---------------- - ----- ----------------------- ---------- - --------- ----------- - -- ----- ---- ---- -
在上述代码中，watchFetchData 和 fetchData 分别是一个 generator。通过 takeEvery 将 FETCH_DATA 与 fetchData 相关联，即表示在每次 FETCH_DATA 被 dispatch 时，都会自动执行 fetchData。
结语
通过 redux-simplifr，开发者可以更加简洁地编写 redux 代码，降低维护成本，同时也能保持 redux 原有的优点。在实际开发中，建议结合实际需求进行使用。
完整示例代码：https://github.com/redux-saga/redux-saga/tree/master/docs/examples/redux-simplifr。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067008e361a36e0bce8b87