介绍
redux-asynch-middleware 是一个用于处理异步 action 的 redux 中间件。它可以使得我们在 redux 中以更加清晰规范的方式进行异步处理。
安装
要使用 redux-asynch-middleware，我们需要先安装它。在命令行中输入以下命令：
npm install redux-asynch-middleware --save
使用
接着，在 store.js 中引入 redux-asynch-middleware：
import { createStore, applyMiddleware } from 'redux';
import asyncMiddleware from 'redux-asynch-middleware';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(asyncMiddleware)
);我们需要注意的是，redux-asynch-middleware 需要和 redux-thunk 配合使用，因为它使用了 redux-thunk 中间件的 dispatch 方法。所以，我们也需要在 store.js 中引入 redux-thunk：
import thunkMiddleware from 'redux-thunk'; const store = createStore( rootReducer, applyMiddleware(thunkMiddleware, asyncMiddleware) );
示例
接下来，让我们来看一下如何在 redux 中调用异步 action。
首先，我们需要定义一个异步 action：
-- -------------------- ---- -------
----- --------- - -- -- ----- ---------- -- -
---------- ----- -------------------- ---
--- -
----- -------- - ----- ----------------------------------
----- ---- - ----- ----------------
---------- ----- --------------------- ---- ---
- ----- ------- -
---------- ----- --------------------- ----- ---
-
--在上面的代码中，我们首先向 redux 发送一个 FETCH_DATA_REQUEST 的 action。然后，我们使用 try-catch 块来从服务器获取数据，并在获取成功后，向 redux 发送 FETCH_DATA_SUCCESS 的 action，并且将获取到的数据作为 payload 传递给该 action。如果获取数据的过程中出现了错误，我们将发送 FETCH_DATA_FAILURE 的 action，并且将错误对象作为 payload 传递给该 action。
接下来，在组件中，我们需要按照以下方式调用这个异步 action：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- ------------------ - -
---------- -- -- ---------------------
-
----- ----------- ------- --------------- -
------------------- -
-----------------------
-
-------- -
----- - ----- ------ --------- - - -----------
-- ----------- -
------ ----------------------
-
-- ------- -
------ ---------------------------
-
------ -
----
-------------- -- -
--- -------------------------------
---
-----
-
-
-
------ ------- --------
----------------
------------------
---------------在上面的代码中，我们通过 connect 函数将组件与 redux 连接起来，并将 fetchData action 作为 props 注入到该组件中。其中，componentDidMount 方法中调用了 fetchData action，并且在组件渲染过程中，根据 isLoading 和 error 的不同情况，展示不同的内容。
结语
通过学习本文，我们学会了如何使用 redux-asynch-middleware 来处理 redux 中的异步 action。通过这种方式，我们可以以一种更加清晰规范的方式组织我们的代码，并且更好地维护我们的 redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005752581e8991b448ea412