引言
在前端开发中，状态管理是一个非常重要的方面，redux 是 React 生态圈中最火的状态管理库之一，但是 redux 操作副作用需要使用 redux-thunk 或 redux-saga 等中间件实现。
而 redux-action-side-effects 则是一个非常好用的 npm 包，可以让开发者轻松实现 redux 异步操作和较为复杂的状态管理，本文将对这个非常优秀的 npm 包进行详细的介绍和使用指导。
什么是 redux-action-side-effects
redux-action-side-effects 是一个简单易用的 redux 状态管理库和 redux 中间件，可以帮助开发者简化异步操作和副作用管理的流程。
redux-action-side-effects 实现了 redux 中间件的 API ，能够拦截 redux 的 action，并且在拦截到之后执行相应的副作用操作。
使用 redux-action-side-effects ，可以通过配置单个 action 处理其所需的所有状态、异步操作和副作用，从而简化项目中的管道。
redux-action-side-effects 的安装
使用 npm 或 yarn 进行安装
npm install redux-action-side-effects
或者
yarn add redux-action-side-effects
redux-action-side-effects 基本使用方式
使用 redux-action-side-effects ，需要在创建 store 时将其作为 middleware 添加到 createStore 方法中。
示例代码如下：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ -------------------------- ---- --------------------------- -- ----- ----- ------ - - -- ----------- ----- - -- -- ------------------------- ----- -------------------- - ---------------------------------- -- -- ----- ----- ----- - -------------------- --------------------------------------
配置 redux-action-side-effects
在使用 redux-action-side-effects 时，需要为其提供一个配置项，这个配置项中包括了所需的所有状态、异步操作和副作用代码。
下面我们来看一段代码来理解如何配置 redux-action-side-effects ：
-- -------------------- ---- -------
------ ------------- ------------ -------- ------------ ---- ----------------------------
------ ---------------- --------- ------------------ ----------------- ---- -------------
------ ----------------- ---- --------------
------ ---------- ------- ---- ----------
-- -----
----- ------------- ------------------- ---------------- - ----- -- -------- ---------- --------- -------- -- -- -
----- --------- - ----------------------------
-- ------------ -
----- - ------ - - ------------
--- -
-------------------------------- ---------------- -----------
- ----- ------- -
----------------------------------
-
-
--
-- --
------ ----- ------- --------------- - -
----------------- -
-------- ---------
----------- -------------------------
--
--上面的代码中，我们定义了一个名为 mySideEffect 的副作用，然后将其添加到了 TConfig 对象中。
TConfig 是 redux-action-side-effects 的一个类型，它是一个包含 actionType 、 handler 和 sideEffect 等的对象，其中：
- actionType：表示所有与该配置相关联的 action 的 type；
- handler：处理由 Redux 触发的 action 类型的 reducer 函数；
- sideEffect：在触发 action 时将执行的副作用函数。
除了上面所介绍的三个属性外， TConfig 还包括以下一些其他的属性：
- getState：获取整个 Redux Store 上的状态；
- getConfig：用于执行前向值推进和获取 store-level 数据；
- hooks：在不同的时间处于执行管理中的回调函数列表，如 before、after、onSuccess、onError 等；
- cacheStrategy：定义 action 需要使用的缓存策略。
回到这个例子，我们可以看到，我们在配置中定义了一个名为 config 的对象，它是一个 TConfig 的实例。config 中的 mySideEffect 会在 myAction 触发时被执行。
示例代码
下面我们来看一个稍微复杂一点的示例，演示如何在一个 redux 项目中使用 redux-action-side-effects 。
Redux store 的核心代码如下：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ -------------------------- ---- --------------------------- ------ - -------- - ---- ------------- ------ - ------ - ---- ---------------- ----- -------------------- - ---------------------------------- ----- ----------- - ---------------------- ------ ----- ----- - --------------------- --------------------------------
创建 action 和定义 reducer
-- -------------------- ---- -------
------ - ------------- ------------- - ---- --------------
------ ----- ---------- - -----------
------ ----- ------ - ------------------------
------ ----- --------------- - ---------------------------------------
------ ----- -------------- - --------------------------------------
------ --------- ----- -
---------- -------
----- --
------ ---- - ---
-
------ ----- ------------- ----- - -
---------- ------
----- ---
------ -----
-
------ ----- ------- - --------------------------- -
-------------- ------- ------ -- --
---------
---------- -----
---
----------------------- ------- ------ - ------- -- -- --
---------
---------- ------
----- --------
---
---------------------- ------- ------ - ------- -- -- --
---------
---------- ------
------ --------
---
--定义副作用函数
-- -------------------- ---- -------
------ - ------------ ----------- - ---- ---------------------------
------ - ----- --- - ---- --------------------
------ - ------------ - ---- --------
------ - ------- ---------------- -------------- - ---- ------------
------ ----- ------------- ---------------- - -
-- ------
----------- ------- -------- -- - ------- ----------------- -------- --------- --- -- -
----- --------- - ----------------------------------
-- ------------ -
-- --------------- ------
----- --------------------
-
--
-- -----
-------- ------------
-- ---- ---------- -----
--------- ------------------ -
--- -
----- ---- - ----- ------------------ --------
----- --------------------------
- ----- ----- -
----- ------------------------
-
--
--
-在这个例子中，我们将异步操作和等待结果的行为分离了出来，让我们轻松地处理副作用，无需关心异步操作细节，让 UI 控件专注于与用户的交互。
结论
redux-action-side-effects 是一个非常棒的 npm 包，它可以帮助我们更方便地进行 redux 状态管理和异步操作，同时也能帮助我们更好地管理副作用。
首先，使用它帮助我们使特定的 action 的 reducer 和相关的副作用函数更明确和紧密耦合，让我们可以更好地管理 redux store，同时也会更简单，因为没有额外的配置过程。
其次，它允许我们开发更干净和可维护的代码，在避免代码混乱和新手错误方面也很有帮助。由于 redux-action-side-effects 使用 redux-saga 作为引擎，因此它充分利用了 redux-devtools、测试代码等 react 生态圈中的许多特性。
如果您是一个 React 工程师或前端开发者，并且正在寻找一个更好的状态管理方案，那么 redux-action-side-effects 是值得考虑的一个选项。它是一个功能强大但灵活的库，可以帮助您更好地管理 React 应用程序中的状态和异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c0f