Redux 是一种流行的 JavaScript 应用程序状态管理库，它提供了一个简单且可预测的状态管理方式。redux-effects 是 Redux 库的一个扩展，它提供了一种更方便的异步处理方式。本文将介绍如何使用 npm 包 redux-effects 来简化异步处理。
安装
首先，在安装 redux-effects 之前，需要先安装 Redux 和 redux-thunk。安装步骤如下：
npm install redux --save npm install redux-thunk --save
然后，使用以下命令安装 redux-effects：
npm install redux-effects --save
使用
安装完成后，我们就可以使用 redux-effects 了。
redux-effects 提供了一些内置的中间件，它们可以帮助我们更方便地处理异步操作。例如，redux-effects 的 call 中间件可以帮助我们进行异步操作，而 redux-effects 的 put 中间件则可以帮助我们 dispatch 一个 action。
接下来，我们将通过一个示例来说明如何使用 redux-effects。
首先，我们定义一个 Redux action creator：
-- -------------------- ---- -------
------ ----- -------- - -- -- --
----- ------------
-------- -
---- ---------------------------------------------
------- -----
--
----- -
------- -
------ -----
-------------- --------------------
------------ ------------------
--
--
---上面的代码中，我们定义了一个 action creator，用来获取用户列表。其中，payload 定义了请求的 URL 和请求方法，而 meta 属性则用来定义 redux-effects 的相关配置。
接着，我们使用 Redux 的 connect 函数将 action creator 与组件关联起来：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- - ---- ------------
----- --- - -- ------ -------- -- -- -
-----
---------------
------- ---------------------- --------------
--------------- -- -
---- --------------
------------------
-------------------
------
---
------
--
----- --------------- - ----- -- --
------ ------------
---
----- ------------------ - -
---------
--
------ ------- ------------------------ -------------------------在上面的代码中，我们使用 connect 函数将 action creator 与组件关联起来，通过 mapDispatchToProps 将 getUsers action creator 放到组件的 props 中。
最后，我们需要在 Redux store 中配置中间件：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------------- ---- ---------------- ------ --------------- ---- -------------- ------ ----------- ---- ------------- ----- ----------------- - ---------------- ------ ------- ------------ ------------ -------------------------------- ------------------- --
在上面的代码中，我们使用 applyMiddleware 函数将 redux-thunk 和 redux-effects 中间件都添加到了 store 中。
现在，我们已经完成了 redux-effects 的使用。当用户点击 Get Users 按钮时，会触发 getUsers action creator 以获取用户列表，并更新组件的 users 属性。
总结：
本文介绍了如何使用 npm 包 redux-effects 来更方便地进行异步操作。我们使用了内置的 call 和 put 中间件来执行异步操作和 dispatch action。通过本文的介绍，我们可以更方便地处理异步操作，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8bfd