Redux 是一个强大的 JavaScript 状态管理库，但在有些情况下，我们需要处理异步操作或类似于 Promise 的 API。这时候，Redux 中间件 thunk 就为我们提供了一个解决方案。
本文将介绍 Redux 中间件 thunk 的基本使用方法，以及如何在项目中应用它。
什么是 Redux 中间件 thunk？
Redux 中间件 thunk 是针对 Redux 的一种中间件，它允许你通过下发函数来处理异步操作以及 Action 返回值。
在使用 Redux 时，我们可以将 Action 定义成对象，包括 type（行为）和 payload（数据）。在大多数情况下，这种方式是足够的。然而，如果一个应用涉及到 API 调用或异步操作，则这种方式就不够用了。
Redux 中间件 thunk 允许我们生成函数，这些函数可以直接与 Redux store 交互并当做 ActionCreator 的返回值。这些函数被称为「thunks」，因为它们是嵌套函数，其中一个参数是 dispatch，它可以发出其他的 Action。
Redux 中间件 thunk 的使用方法
首先，我们需要在项目中安装 Redux 和 Redux-thunk：
npm install redux redux-thunk --save
在 store 的配置文件中引入 applyMiddleware 和 thunk：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);然后，我们就可以在 action 中使用 thunk。比如，如果我们想要使用异步操作从服务器读取数据并将其放入 store 中，我们可以这样做：
-- -------------------- ---- -------
------ ----- ---- --------
-- ------ -----
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
-- ------ --------
------ ----- ---------------- - -- -- -
------ -
----- -------------------
--
--
------ ----- ---------------- - ------ -- -
------ -
----- -------------------
-------- -----
--
--
------ ----- ---------------- - ------- -- -
------ -
----- -------------------
-------- ------
--
--
-- -----
------ ----- --------- - -- -- -
------ ---------- -- -
----------------------------
-----------------------------------------
---------------- -- -
----- ---- - --------------
--------------------------------
--
-------------- -- -
----- ------------ - --------------
----------------------------------------
--
-
--在这个例子中，fetchData 函数是一个 thunk，它接收一个 dispatch 函数作为参数，异步执行 API 调用，然后在成功或失败时分别触发对应的 Action。
我们可以在组件中调用这个 Action Creator：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- ------------
----- --- - -- -- -
----- -------- - --------------
----- ---- - ------------------- -- ------------
----- ----- - ------------------- -- -------------
----- --------- - ------------------- -- -----------------
------------ -- -
----------------------
-- ------------
-- ----------- -
------ ----------------------
-
-- ------- -
------ ----------- --------------
-
------ -
-----
--------------
---------------- -- -
------ ---- --------------------------------
---
------
--
--
------ ------- ----在这个组件中，我们使用了 useEffect 钩子来触发 fetchData Action，根据数据加载状态和错误状态渲染相应组件。
结论
Redux 中间件 thunk 可以使得我们可以更加容易地处理异步操作，以及更多复杂的逻辑和流程。如果你还没有尝试过它，不妨在项目中使用它试试。
希望这篇文章能够帮助你理解 Redux 中间件 thunk 的基本使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673198040bc820c5823962a7