Redux 是 React 生态圈中最常用的状态管理库之一，可以很方便地管理 React 应用的状态。但是在处理异步 action 时，Redux 并不能提供很好的支持。这时就需要借助 Redux-Thunk 中间件来处理异步 action。
什么是 Redux-Thunk 中间件
Redux-Thunk 是一个 Redux 中间件，允许 action 创建器返回一个函数而不是一个对象。这个函数可以接收 dispatch 和 getState 两个参数，可以在函数体内进行异步操作。当这个函数执行完毕后，再通过 dispatch 触发一个普通 action。
安装
在使用 Redux-Thunk 中间件之前，需要先安装它：
npm install redux-thunk
使用
在创建 store 时，需要将 Redux-Thunk 中间件传递给 createStore 函数：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 你的 rootReducer
const store = createStore(rootReducer, applyMiddleware(thunk));然后在 action 创建器中，返回一个函数即可。在这个函数中，可以进行异步操作，并通过 dispatch 触发一个普通 action：
-- -------------------- ---- -------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
-------- ------------------ -
------ -
---- - ------------------
-
-
-------- ---------------------- -
------ -
---- - -------------------
------- - ----
-
-
-------- ----------------------- -
------ -
---- - -------------------
------- - -----
-
-
-------- ----------- -
------ ---------- --------- -- -
-----------------------------
-------------------------------------
-------------- -- ----------------
---------- -- -
---------------------------------
--
------------ -- -
----------------------------------
---
-
-在上面的代码中，fetchData 返回一个函数，而不是一个对象。这个函数接收两个参数：dispatch 和 getState。函数体内进行异步操作后，可以通过 dispatch 触发一个普通 action。
总结
使用 Redux-Thunk 中间件可以让 Redux 很好地支持异步操作。在 action 创建器返回一个函数后，就可以在函数体内进行异步操作。在操作完成后，再通过 dispatch 触发一个普通 action。
示例代码
完整的示例代码可以在 GitHub 上找到：https://github.com/example/redux-thunk-example。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc652af6b2d6eab3223a84