介绍
redux-agents 是一个用于管理副作用的 Redux 中间件。使用 redux-agents，我们可以将业务逻辑层和数据层分离，使得业务逻辑更加清晰，更易于维护。本文将详细介绍 redux-agents 的使用方法。
安装
使用 npm 安装 redux-agents：
npm install redux-agents
副作用
副作用是指那些与纯函数无法做到完全隔离的操作，比如访问数据库、发送 HTTP 请求等等。在 Redux 应用中，副作用通常被称为“异步操作”或“副作用操作”。
使用 redux-agents 管理副作用
使用 redux-agents 管理副作用的主要思路是将副作用操作封装成一个叫做“agent”的脚本，然后将这个脚本传给 redux-agents 中间件，在特定的情况下触发它。
创建一个 agent
先来看一个简单的示例：
-- -------------------- ---- -------
-- ---------
------ - ----------- - ---- ---------------
------ ----- ------------ - -------------
----- ----------------
----- ------ --------- --------- ---- -- -
----- -------- - ----- ------
----------------------------------------------------------------------------------------------------------
--
----- ---- - ----- ----------------
---------- ----- -------------- -------- ---- ---
--
---这个 agent 的作用是根据城市名称获取该城市的天气情况，并将数据存入 Redux store 中。
这里我们引入了 redux-agents 的 createAgent 函数，它接受一个对象参数，包括以下属性：
- name: agent 的名称，必填。
- load: 一个异步函数，用于执行副作用操作，必填。
- shouldLoad: 一个函数，用于判断是否需要执行 load 方法，如果返回 true，则会执行 load 方法，否则跳过，可选。
- done: 一个函数，用于在 load 方法完成后执行的回调函数，可选。
- args: 一个对象，用于传递参数给 load 方法，可选。
注册一个 agent
在 store.js 中注册 agent：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - --------------------- - ---- --------------- ------ ----------- ---- ------------- ------ - ------------ - ---- ----------- ----- --------------- - ----------------------- ------- --------------- --- ----- ----- - ------------------------ ---------------------------------- ------ ------- ------
这里我们使用了 redux-agents 的 createAgentMiddleware 函数创建了一个名为 agentMiddleware 的 Redux 中间件，将注册的 agent 传给其中，再将其应用到 store 中。
触发一个 agent
在组件中触发 agent：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------ - ---- -----------
----- ------- ------- --------- -
------------------ -
---------------------------- -------
-
-------- -
----- - ------- - - -----------
------ -
-----
------- ---------------------------------------------- ----------------
------------- - ------------------- - -----------
------
--
-
-
----- --------------- - ----- -- --
-------- --------------
---
----- ------------------ - -
-------------
--
------ ------- ------------------------ -----------------------------这里我们将 agent 注入到 Weather 组件的 props 中，当用户点击 Get Weather 按钮时，触发 agent 的 load 方法，并传递参数 'New York' 给它。
总结
使用 redux-agents 管理副作用能够有效地最小化 Redux 应用的副作用操作，使其更易于维护和升级。虽然它需要一些额外的工作来设置和管理，但是这些努力肯定能够为你的应用带来更多的成功和效益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556e381e8991b448d3c1f