redux-sw-middleware 是一个 Redux 中间件，它可以将异步 action 转换为同步 action，并解决由异步操作引起的状态管理问题。在本文中，我们会详细介绍 redux-sw-middleware 的使用方法，以及如何在 React 应用程序中集成它。
安装
在使用 redux-sw-middleware 之前，我们需要先安装它。
使用 npm：
--- ------- -------------------
使用 yarn：
---- --- -------------------
配置
接下来，我们需要在 Redux store 中配置 redux-sw-middleware。
在使用 redux-sw-middleware 之前，需要先引入 applyMiddleware 函数。
------ - ------------ --------------- - ---- --------
然后，我们可以为 createStore 函数配置中间件：
------ - ------------------- - ---- ---------------------- ------ ----------- ---- ------------- ----- ------------- - ---------------------- ----- ----- - ------------ ------------ ------------------------------ --
在上面的代码中，我们首先引入 createApiMiddleware 函数，然后使用 createStore 函数创建一个 Redux store，并通过 applyMiddleware 函数将 apiMiddleware 配置到 store 中。
使用
我们先来看一下使用 redux-sw-middleware 常见的场景 - 异步请求带来的问题。
在 Redux 中，我们经常使用异步 action 来进行网络请求，例如获取用户信息、发送邮件等操作。这些异步请求最终会转化为同步 action，从而更新应用程序的状态。但由于异步操作的不确定性，这些异步请求往往会导致状态管理的问题，在具体方案实现的中，很容易出现回调地狱等情况。例如：
----- ----------- - -------- -- ---------- -- -
---------- ----- ----------------------- ---
-----------------------------
-------------- -- ----------------
-------------- -- -
---------- ----- ------------------------ -------- -------- ---
--
------------ -- -
---------- ----- ------------------------ ----- ---
---
--在上面的代码中，我们定义了一个异步 action，它会向服务器发起请求，获取用户信息。在获取用户信息之前，我们会先 dispatch 一个 GET_USER_INFO_REQUEST action，表示正在加载中。当请求成功时，我们会 dispatch 一个 GET_USER_INFO_SUCCESS action，并将获取到的用户信息作为 payload 传递给这个 action。当请求失败时，我们会 dispatch 一个 GET_USER_INFO_FAILURE action。
这里有一个重要的问题，我们需要考虑如何处理 GET_USER_INFO_SUCCESS 和 GET_USER_INFO_FAILURE 这两个 action。如果其他部分的代码需要使用这些 action 中的数据，或者需要将它们传递给其他的 action，我们就需要在 reducer 中处理它们，并将它们转换为同步 action。但这可能需要一些 boilerplate 代码，在实践中，可能还要结合第三方库。
现在，我们可以使用 redux-sw-middleware 来解决这个问题。通过 redux-sw-middleware 中提供的 createApiMiddleware 函数，我们可以将对 API 的所有请求自动转换为统一的 action。
------ - ------------------- - ---- ---------------------- ------ - ------------ - ---- ---------------- ----- ----------- - -------- -- ----------------------------------- ---- ----------------------- --- ----- ------------- - ----------------------
在上面的代码中，我们首先使用 createAction 函数创建了一个名为 USER_INFO_REQUEST 的 action，并将请求的 URL 作为 payload 传递给它。然后，我们通过 createApiMiddleware 函数创建一个名为 apiMiddleware 的中间件，并将它配置到 Redux store 中。
现在，redux-sw-middleware 会在 dispatcher 发出一个名为 USER_INFO_REQUEST 的 action 时，将该 action 自动拦截，并使用此 URL 发送异步请求，不会回调任何 redux 相关代码，请求回来后再自动派发由 dispatch 出的同步 action，根据请求结果的 status 等属性决定该 action 的类型和 payload，并将新生成的同步 Action 发送出去。
---------------------------------------- -- - ----- ----- - ----------------- ----------------------------- ---
在上面的代码中，我们使用 store.dispatch 方法来发送一个 GET_USER_INFO_REQUEST action，并将 userId 作为参数传递给 getUserInfo。在请求成功后，我们可以使用 store.getState() 方法来获取应用程序的状态，并查看用户信息是否被正确更新。
实例
接下来，我们通过一个实例来展示如何在 React 应用程序中使用 redux-sw-middleware。
创建项目
我们先使用 create-react-app 创建一个 React 应用程序。
--- ---------------- ------
使用你常用的 package manager 安装依赖：
--- ------- ---- -------
添加 Redux
接下来，我们需要添加 Redux，让我们先安装相关的依赖：
--- ------- ----- ----------- ---- --- ----- -----------
在 src 目录下创建一个 reducers.js 文件，用于定义应用程序中的 reducer。
------ - --------------- - ---- --------
------ - ------------- - ---- ----------------
----- ------------ - -
-------- ------
------ -----
----- ---
--
------ ----- --------------- - --------------
-
---------------------- ------- -- --
---------
-------- -----
------ -----
---
---------------------- ------- ------- -- --
---------
-------- ------
----- ---------------
---
---------------------- ------- ------- -- --
---------
-------- ------
------ ---------------
---
--
-------------
--
------ ------- -----------------
----- -----------------
----- ----------------
---
---在上面的代码中，我们首先通过 combineReducers 函数将 user.reducer 合并为一个根 reducer。然后，我们使用 handleActions 函数创建了一个名为 userInfoReducer 的 reducer，它可以处理 GET_USER_INFO_REQUEST、GET_USER_INFO_SUCCESS 和 GET_USER_INFO_FAILURE 这三个 action。
接下来，我们需要创建一个 store.js 文件，在其中创建一个 Redux store。
------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- ---------------------- ------ ----------- ---- ------------- ----- ------------- - ---------------------- ----- ----- - ------------ ------------ ------------------------------- -- ------ ------- ------
在上面的代码中，我们首先通过 createApiMiddleware() 函数创建了一个名为 apiMiddleware 的 redux-sw-middleware 中间件，并将它配置到了 createStore 函数中。然后，我们通过导出一个 store 对象，使得其他模块可以访问该 store。
获取数据
现在，我们可以开始获取用户信息了。我们需要首先安装一个请求库，这里我们使用 axios。
--- ------- ----- ---- --- -----
接下来，我们创建一个名为 App.js 的组件。
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ----------- - ---- ----------------------------
-------- ----- -
----- ---- - ------------------- -- ----------------------
----- ------- - ------------------- -- -------------------------
----- -------- - --------------
------------ -- -
-------------------------
-- ------------
-- --------- -
------ -------------
-
------ -
-----
--------------------- ----- ---
------
--
-
------ ------- ----在上面的组件中，我们使用 useSelector 来访问 store 中的 user.info.data 和 user.info.loading 两个属性，并使用 useDispatch 方法来分发异步 action。在渲染组件时，如果 loading 属性为 true，我们显示 'Loading...' 文本。否则，我们使用 JSON.stringify 方法将 user.info.data 对象转换为字符串，并在页面上显示该字符串。
接下来，我们需要创建一个名为 userInfoActions.js 的文件，用于定义异步 action。
------ - ------------ - ---- ----------------
------ ----- ----------- - -------- --
---------------------------------------
---- -----------------------
------- ------
---在上面的代码中，我们使用 createAction 函数创建了一个名为 GET_USER_INFO_REQUEST 的 action，并将请求的 URL 和 HTTP 方法作为 payload 传递给它。
现在，我们可以启动项目了，在命令行中运行:
--- ----- ---- -----
在浏览器中打开 http://localhost:3000，我们就能看到获取到的用户信息了！这是因为 redux-sw-middleware 将异步请求转换为同步 action，我们可以很容易地在组件中访问 store 中的数据，并渲染页面。
总结
在本文中，我们介绍了 Redux 中间件 redux-sw-middleware 的用法，并展示了如何在 React 应用程序中集成它。通过使用 redux-sw-middleware，我们可以将异步操作转换为同步操作，并避免由异步操作引起的状态管理问题。这为我们编写复杂的应用程序和组件提供了很大的帮助，可以让我们更加关注我们的业务逻辑和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700de361a36e0bce8c9b