Redux 是一个 JavaScript 状态容器，它使我们可以方便的管理应用的所有状态。但是，当你使用 Redux 发送异步请求时，你会发现 Redux 原生并不支持异步操作。这时候，为了解决这个问题，我们可以使用 redux-thunk-async 这个 npm 包来帮助我们实现异步操作。
简介
redux-thunk-async 是一个 Redux 中间件，它支持在 action 中返回一个函数，而不是一个普通的 action 对象。这个函数可以异步的操作网络请求等副作用，最后再发出真正的 action。
安装
你可以使用 npm 或 yarn 来安装 redux-thunk-async。
npm install redux-thunk-async
或者，
yarn add redux-thunk-async
用法
首先，在你的 createStore 中添加 redux-thunk-async 中间件：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk-async';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);接下来，在 action 中返回一个函数：
-- -------------------- ---- -------
-- ----------
------ - -------------------- -------------------- ------------------- - ---- ----------
------ ----- ---------- - -- -- -
------ -------- -- -
------------------------------
---------------------------------------------------
-------------- -- ----------------
----------- -- -
-----------------------------------
--
------------ -- -
-------------------------------------------
--
-
-
----- ----------------- - -- -- -
------ -
----- -------------------
-
-
----- ----------------- - ----- -- -
------ -
----- --------------------
-------- -----
-
-
----- ----------------- - ----- -- -
------ -
----- --------------------
-------- -----
-
-上面的示例代码中，fetchUsers 这个 action 返回了一个函数，在函数中进行了网络请求，并且在成功或失败的情况下 dispatch 相应的 action。
示例代码
下面是一个完整的示例代码，它演示了如何使用 redux-thunk-async 进行异步请求：
-- -------------------- ---- -------
-- --------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------------
--
------ ------- ------
-- --------
------ ----- ------------------- - ----------------------
------ ----- ------------------- - ----------------------
------ ----- ------------------- - ----------------------
-- ----------
------ - -------------------- -------------------- ------------------- - ---- ----------
------ ----- ---------- - -- -- -
------ -------- -- -
------------------------------
---------------------------------------------------
-------------- -- ----------------
----------- -- -
-----------------------------------
--
------------ -- -
-------------------------------------------
--
-
-
----- ----------------- - -- -- -
------ -
----- -------------------
-
-
----- ----------------- - ----- -- -
------ -
----- --------------------
-------- -----
-
-
----- ----------------- - ----- -- -
------ -
----- --------------------
-------- -----
-
-
-- -----------
------ - -------------------- -------------------- ------------------- - ---- ----------
----- ------------ - -
------ ---
-------- ------
------ --
-
----- ------- - ------ - ------------- ------- -- -
------------------- -
---- --------------------
------ -
---------
-------- ----
-
---- --------------------
------ -
---------
-------- ------
------ ---------------
------ --
-
---- --------------------
------ -
---------
-------- ------
------ ---
------ --------------
-
-------- ------ ------
-
-
------ ------- --------
-- ------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------
----- --- - -- --------- ---------- -- -- -
------------ -- -
-------------
-- ---
------ -
-----
- ---------------- - ------------------- - ---- -
- --------------------- -
----------------------- -- -- ------------------------------
- ----
-
- -------------- - ------------------------- - ---- -
------
--
-
----- --------------- - ----- -- -
------ -
--------- -----
-
-
----- ------------------ - -------- -- -
------ -
----------- -- -- ----------------------
-
-
------ ------- --------
----------------
------------------
-------在上面的示例代码中，我们使用了 connect 函数将 Redux 的 state 和 action 映射到了组件的 props 中，并且在组件的 useEffect 中调用了 fetchUsers action 来获取数据并展示出来。
总结
在 Redux 中发送异步请求，我们可以使用 middleware（如：redux-thunk-async）来支持异步操作。redux-thunk-async 允许我们在 action 中返回一个函数，函数可以异步的操作网络请求等副作用，并在完成这些异步操作之后再发出真正的 action。这个库使我们的代码更易读，更易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cde