在前端开发中，状态管理是一项非常重要的任务。Redux 是一个非常出色的状态管理库，能够帮助我们更好地组织和管理应用程序的状态。但是，Redux 还不是完美的，因为它没有能够处理副作用的能力。幸运的是，有一个名为 redux-side-effects 的 npm 包，能够较好地帮助我们处理 Redux 中的副作用。本文将介绍 redux-side-effects 的使用方法，帮助你更好地掌握这个工具。
什么是 redux-side-effects？
redux-side-effects 是一个用于处理 Redux 中副作用的库。这个库可以帮助我们较好地处理副作用，并且支持很多种不同类型的副作用（比如 ajax 请求、时间处理等等）。使用 redux-side-effects 可以更好地组织 Redux 中的业务逻辑，避免你将业务逻辑单纯地写在 ActionCreator 中，减少了组织结构的混乱。
安装和使用
redux-side-effects 可以通过 npm 安装。在项目目录下使用以下命令来安装：
--- ------- ------------------
安装完成后，我们只需要简单地修改 Redux 的 store 和 action 即可使用 redux-side-effects。
修改 Store
redux-side-effects 需要一个中间件来处理 Redux 中的副作用。为了使用 redux-side-effects，我们需要在创建 Redux store 时加入相应的中间件。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ -------------------------- ---- --------------------- ----- -------------------- - ----------------------------- ----- ----- - ------------ --------- ---------------------- --------------------- --
在这个例子中，我们使用了 redux-thunk 作为 Redux 的另一个中间件，并加入了 redux-side-effects 的中间件。
修改 Action
在 Redux 中的 ActionCreator 中，我们经常需要执行一些异步操作。比如当我们发送一个请求到服务器时，我们不能仅仅是一个同步的操作。我们可以使用 redux-thunk 中间件来执行异步的操作，然后在异步请求成功后调用相应的 Action。
------ ----- ----------- - -- -- ----- -------- -- -
----- ------------ - ----- ----------------------- -- ------------
----------
----- ------------------------
-------- -------------
---
--我们可以将相应的 ActionCreator 改写为返回一个方法，这个方法中执行一个异步的操作，异步操作完成后再调用相应的 Action。
使用 redux-side-effects，我们可以更进一步地提取副作用，并将副作用封装成一个单独的 Action。
------ ----- ----------- - -- -- -- ----- ---------------- ---- -------- --------------------- ------------------- ---
在这个例子中，我们使用了 redux-side-effects 提供的一个 ActionCreator，并且将异步请求的URL和回调函数传递给中间件。当异步请求完成后，redux-side-effects 会自动调用我们设置的 ActionCreator。
示例代码
下面是一个完整的示例，演示如何在项目中使用 redux-side-effects。
安装依赖
我们首先需要将 redux-side-effects 和 redux-thunk 安装到项目中。
--- - ------------------ ----------- --
配置 Store
在 Redux 的 store 中需要加入相应的中间件。在这个例子中，我们需要载入 redux-thunk 和 redux-side-effects 中间件。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ -------------------------- ---- --------------------- ------ -------- ---- ------------- ----- -------------------- - ----------------------------- ----- ----- - ------------ --------- ---------------------- ---------------------- --
我们通过 createSideEffectMiddleware() 方法创建一个 redux-side-effects 的中间件，并将它加入到 applyMiddleware() 中以启用它。
在这个例子中，我们仍然需要使用 redux-thunk 接受异步操作。你可以在 applyMiddleware() 中添加更多的中间件，用于处理项目的其他需求。
ActionCreator
在 ActionCreator 中，我们将定义异步的 ActionCreator，并把它们返回到 store 中。这里，我们将定义两个 ActionCreator，分别是一个执行异步操作的 ActionCreator 和一个 ActionCreator 的回调函数，用于处理异步操作完成后的数据。
------ ----- ---------- - -- -- -- ----- -------------- ---- ------------- --------------------- ------------- --- ------ ----- ------------ - ------ -- -- ----- ---------------- ----- ---
在 fetchPosts 中，我们将定义异步操作 fetch。这个操作中使用了一个 url，指定了请求的 URL。接下来，我们将使用 receivePosts 回调函数来处理异步操作的数据。
Reducers
最后，我们将需要在 Reducers 中定义 fetchPosts 和 receivePosts 的过程。
------ - --------------- - ---- --------
------ - -------- - ---- ------------
------ - ------------ ------------- - ---- -----------
-------- ----------- - ------------ ------ ----- ---- ------- -
------ ------------- -
---- ------------
------ - --------- ----------- ---- --
---- --------------
------ - --------- ----- ------------ ----------- ----- --
--------
------ ------
-
-
----- ----------- - -----------------
------
---
------ ------- ------------在 Reducers 中，我们将定义一个 posts Reducer，并将其返回到 rootReducer 中。在这个例子中，我们的 post Reducer 只处理两个 Action：FETCH_POSTS 和 RECEIVE_POSTS。FETCH_POSTS 将使 isFetching 设置为 true，而 RECEIVE_POSTS 将它设置回 false，并且把异步数据简单地存储在 data 字段中。
使用
有了我们定义的所有组件，我们就可以在项目中使用 fetchPosts ActionCreator 并调用 store.dispatch 方法。
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------
----- --------------- - ----- -- --
----------- -----------------------
----- -----------------
---
----- ------------------ - -------- -- --
----------- -- -- -----------------------
---
----- --- ------- --------------- -
------------------- -
------------------------
-
-------- -
----- ------------ ----- - -----------
------ -
-----
----------- -- -------------
----------- -- ------------- -- -
---- --------------------------------
---
------
--
-
-
------ ------- --------
----------------
-------------------
-------在组件中，我们将使用 redux 中的 connect 函数，将 Redux store 的状态映射到 React 的 props 中。在 componentDidMount 生命周期中，我们将执行我们定义的 ActionCreator，获取异步数据，然后将其渲染到前端页面中。
总结
Redux 是一个非常流行的状态管理库，但是它无法完美地处理副作用。通过使用 redux-side-effects，我们可以更好地组织 Redux 中的副作用，并保持我们的项目结构的简洁和一致性。在项目中使用 redux-side-effects 非常简单，只需在 store 中加入相应的中间件，然后在 ActionCreator 中定义异步操作和回调函数即可。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067008e361a36e0bce8b3e