在使用 Redux 管理前端应用状态时，Redux-thunk 是一种常用的中间件，它允许我们在 Redux 中处理异步逻辑。本文将介绍 Redux-thunk 的具体用法以及如何正确地使用它。
Redux-thunk 的定义
简单来说，Redux-thunk 是一个允许在 Redux 中处理异步逻辑的中间件。它允许我们编写返回函数而不是对象的 action creator，当该返回函数被 dispatch 时，Redux-thunk 将会拦截该 action，并允许我们在其中执行异步操作。
安装 Redux-thunk
为了使用 Redux-thunk，我们需要先安装它。在 React 应用中，可以这样安装：
npm install redux-thunk
或者使用 Yarn 安装：
yarn add redux-thunk
然后，在 Redux Store 的创建中，将该中间件传入 applyMiddleware 函数中：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';
const store = createStore(reducers, applyMiddleware(thunk));使用 Redux-thunk
使用 Redux-thunk 的关键在于编写返回函数而不是对象的 action creator。这些返回函数接收 dispatch 和 getState 两个参数，可以用来获取当前的 Redux Store 状态，以及手动 dispatch 其他 action。
以下是一个简单的 action creator 示例：
-- -------------------- ---- -------
------ ----- --------- - -- -- -
------ ---------- --------- -- -
---------- ----- -------------------- ---
------------------
--------- -- -----------
---------- -- -
----------
----- ---------------------
-------- -----
---
--
------------ -- -
----------
----- -------------------
-------- ------
---
---
--
--在上述代码中，我们可以看到 fetchUser 返回了一个函数，该函数接收 dispatch 和 getState 两个参数。在函数中，我们首先 dispatch 了一个 PENDING 状态的 action，表示正在加载数据。然后，我们使用 Fetch API 发起了异步请求，根据请求结果 dispatch 了 SUCCESS 或 ERROR 状态的 action。
Redux-thunk 的优缺点
使用 Redux-thunk 的优点是允许我们在 Redux 中处理异步逻辑，使得应用的状态管理更加完善。另外，由于 Redux-thunk 允许我们写入所有的异步逻辑，因此相比于其他异步方案，如 Redux-saga 或 Redux-observable，Redux-thunk 更加容易入手。
然而，使用 Redux-thunk 也存在缺点。由于一些 action 没有被严格分离到特定的 reducer 中，因此可能会导致代码变得混乱，逻辑不清。此外，Redux-thunk 本身没有提供处理错误和取消请求的机制，需要我们手动编写处理逻辑。
总结
Redux-thunk 是一个常用的 Redux 中间件，允许我们在 Redux 中处理异步逻辑。为了使用 Redux-thunk，我们需要在 Redux Store 创建时传入该中间件。在使用 Redux-thunk 时，我们需要编写返回函数而不是对象的 action creator，以处理异步逻辑。尽管使用 Redux-thunk 有一些优缺点，但它仍然是一个比较容易入手的异步方案，可以帮助我们更好地管理应用状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64770069968c7c53b0394aab