什么是 reduced-actions-redux
reduced-actions-redux 是一个基于 Redux 的状态管理工具，它可以让你更容易地在 Redux 中使用 action。与 Redux 原生的 action 有所不同的是，reduced-actions-redux 的 action 可以接受多个参数，并且只需传递修改数据的部分。这使得你可以更加灵活地编写修改数据的逻辑，并且在代码中减少重复的代码。
安装 reduced-actions-redux
你可以通过 npm 安装 reduced-actions-redux：
npm install reduced-actions-redux --save
初始化 reduced-actions-redux
在使用 reduced-actions-redux 之前，你需要对它进行初始化。首先，在你的 Redux store 中，需要使用 applyMiddleware 引入 reducedActionsMiddleware。然后，使用 createStore 方法创建 Redux store。如下所示：
import { createStore, applyMiddleware } from 'redux';
import { reducedActionsMiddleware } from 'reduced-actions-redux';
const store = createStore(
reducer,
initialState,
applyMiddleware(reducedActionsMiddleware()),
);创建 reduced-actions-redux action
reduced-actions-redux 提供了一个 createReducedAction 方法，用于创建自定义 action。createReducedAction 的参数是一个字符串类型的 actionType，以及一个返回一个对象的函数 reducer。reducer 中对数据的修改只需返回修改的部分，无需对整个 state 进行修改。示例代码如下：
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------------
------ ----- ----------------- - --------------------
------ ----- ---------------- - -------------------------------------- ------- -------- -- -
------ -
-------- ------------- - --------
--
---在上例中，我们创建了一个名为 incrementCounter 的 reduced-actions-redux action，它对传入的 payload 进行加法操作，并返回修改后的 state。
在 reducer 中处理 reduced-actions-redux action
我们需要在 reducer 中添加对 reduced-actions-redux action 的处理。在 reducer 中，使用 handleReducedActions 方法来处理 reduced-actions-redux action。示例代码如下：
-- -------------------- ---- -------
------ - -------------------- - ---- ------------------------
------ ------- -------- -------------- ------- -
------ ------------- -
---- ------------------
------ --------------------------- ------- ------- -------- -- -
------ -
---------
-----------
--
---
--------
------ ------
-
-在上例中，我们在 reducer 中添加了对 reduced-actions-redux action 的处理。在 handleReducedActions 中，我们将 state 和 action 作为参数传入，并传入一个 reducer，这个 reducer 返回修改数据的部分。在返回值中，我们通过 ES6 的延展运算符将 payload 中的数据合并到原 state 中。这样，我们就完成了对 reduced-actions-redux action 的处理。
调用 reduced-actions-redux action
现在，我们可以在组件中调用我们刚刚创建的 reduced-actions-redux action 了。我们需要使用 Redux 的 useDispatch 方法来 dispatch 我们的 action。示例代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - ---------------- - ---- ------------
-------- --------- -
----- -------- - --------------
----- ----------- - -- -- -
------------------------------
--
------ -
-----
------------ --------------
------- ----------------------------------------
------
--
-在上例中，我们在组件中使用了 useDispatch 方法来获取 dispatch。我们调用 incrementCounter(1)，并将结果传递给 dispatch，在 reducer 中对数据进行处理后，就能得到我们期望的结果了。
总结
通过使用 reduced-actions-redux，我们可以更加灵活地编写修改数据的逻辑，并且在代码中减少重复的代码。在下一次开发过程中，你可以尝试在自己的应用中使用 reduced-actions-redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b47