介绍
axios-promise-redux-middleware是一个优秀的工具，用于将异步操作集成到Redux中，使前端开发更加高效。该工具基于axios promise库，可以用来发送异步请求并将响应结果存储到Redux store中。
这个工具的主要特点包括：
- 配置简单：在
Redux中非常容易地设置中间件。只需几个简明的配置选项即可。 - 轻量级：该库只依赖于
redux-thunk和axios，不需要其他复杂的依赖项。 - 易于使用：可以使用
Promise.then()和Promise.catch()方法处理异步请求。
安装
可以通过npm安装该包，执行以下命令：
npm install --save axios-promise-redux-middleware
或者通过yarn安装：
yarn add axios-promise-redux-middleware
配置
中间件
将中间件添加到你的Redux store中，这样可以在Redux action中使用它来发送异步请求并将结果存储到Redux store中。
import { createStore, applyMiddleware } from 'redux';
import axiosPromiseMiddleware from 'axios-promise-redux-middleware';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(axiosPromiseMiddleware)
);Action
在Redux action中使用axios-promise-redux-middleware发送异步请求。以下是async / await方法的示例：
-- -------------------- ---- -------
----- --------- - -------- -- ----- ---------- -- -
----- ------- - -
------- ------
---- -----------------------
--
----- -------- - ----- ----------
----- -------------
-------- ---------------
---
------ --------------
--以上代码展示了如何使用axios-promise-redux-middleware发送异步请求，并将响应结果存储到Redux store。在这个示例中，我们首先创建一个API请求的选项，然后将它们与axios一起作为payload传递给Redux action。对于异步操作，axios-promise-redux-middleware会等待Promise完成，并将结果发送给Redux store。
Reducer
在Redux reducer中，我们需要根据 action type 来更新state。以下是FETCH_USER的reducer函数的示例：
-- -------------------- ---- -------
----- ------------ - -
----- -----
-------- ------
------ -----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------------
------ -
---------
-------- -----
------ -----
--
---- -----------------------
------ -
---------
-------- ------
----- ---------------
--
---- ----------------------
------ -
---------
-------- ------
------ -----------------------
--
--------
------ ------
-
--根据 action type来更新state，是需要通过reducer函数来处理的。在这个例子中，我们创建了一个userReducer函数来更新user state，并根据action type来改变loading和error的值。可以看到，我们在FETCH_USER_PENDING类型的action中改变了state的loading值，表明请求已经开始了。在FETCH_USER_FULFILLED类型的action中，我们将响应结果存储到state中的user属性中。在 FETCH_USER_REJECTED 类型的 action 中，我们将错误消息存储在 state 中的 error 属性中。
示例代码
以下是一个完整的示例代码。假设我们要从服务器端获得用户信息，并显示其用户名和电子邮件地址：
创建store：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ---------------------- ---- --------------------------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------- ----------------------- -- ------ ------- ------
创建reducer：
-- -------------------- ---- -------
------ - --------------- - ---- --------
----- ----------- - ------ - - ----- ----- -------- ----- -- ------- -- -
------ ------------- -
---- ---------------------
------ - --------- -------- ---- --
---- -----------------------
------ - --------- -------- ------ ----- ------------------- --
--------
------ ------
-
--
----- ----------- - -----------------
----- ------------
---
------ ------- ------------创建action：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- --------- - ---- -- -
----- ------- - -
------- ------
---- -------------------
--
------ -
----- -------------
-------- ---------------
--
--创建Component：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- -------------
----- ---- ------- --------------- -
------------------- -
----- - --------- ----- - - -----------
-------------------------------------
-
-------- -
----- - ----- ------- - - -----------
-- --------- -
------ -------------
-
-- ------- -
------ ----- --- -------
-
------ -
-----
--------------------
-------------------
------
--
-
-
----- --------------- - ------- -- -
------ -
----- ----------------
-------- -------------------
--
--
------ ------- -------------------------------这个User组件会显示用户的用户名和电子邮件地址。在componentDidMount()方法中，我们调用了fetchUser()函数，并将结果存储在Redux store中。如果loading属性为true，则显示此时在加载中...，如果用户未找到，则显示用户未找到，否则显示用户名和电子邮件地址。
结论
axios-promise-redux-middleware是一个高效的工具，可以使前端开发更加简单和快捷。通过使用该库，我们可以将异步操作集成到Redux中，并更好地管理状态。希望这篇文章对您有帮助并能够为您的项目提供一些思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e027e