Redux 是一个管理状态的强大库，并且与 React 结合使用效果更佳。我们可以轻易地将应用程序的状态存储在 Redux store 中，并在需要时调用。然而，在某些情况下，我们需要更多的控制权来处理业务逻辑，这时候我们可以使用 redux-thunk 中间件。
Redux Thunk 中间件
Redux Thunk 中间件是 Redux 的一个中间件，它允许我们将函数作为 action 调度。通常，action 是一个对象，其中包含有关事件的信息（例如 click 或 submit）。然后，Redux store 将此对象转发到 reducer 进行状态更改。而 redux-thunk 允许我们在调度时将函数作为参数传递并在需要时执行该函数。
安装和配置
在使用 redux-thunk 中间件之前，我们需要在我们的项目中安装该中间件。可以通过以下命令来安装：
--- - -----------
然后，我们将在 Application 的 store 配置中将 redux-thunk 导入。在 Redux 中，这通常在 store.js 文件中完成。在那里，我们可以使用以下语法来获取中间件：
------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ----- ----- - -------------------- ----------------------------------
这行代码使用 applyMiddleware() 方法将 thunkMiddleware 与 Redux Store 配置一起使用。
简单示例
定义一个简单的 Redux action，它将直接派发一个 action 对象：
------ ----- -------- - -- -- -
------ -
----- -----------
--
-如果我们想在 action 调度前执行某些异步任务，如从 API 获取数据，则可以使用 Thunk 中间件。我们可以将此操作定义为一个函数，并在此函数中调用所需的 API：
------ ----- -------- - -- -- -
------ -------- -- -
-----------------------
-------------- -- -
----------
----- ------------
-------- -------------
---
---
--
--在上面的代码中，我们首先引入 axios.js 库，对于这个例子，我们使用 axios 库来与 API 进行通信。然后，我们定义了一个函数，它将返回另一个函数。这个另一个函数接收一个 dispatch 函数，该函数负责更改 Redux Store 内容的第二个参数。在此之后，我们可以使用 axios 库发送 HTTP 请求，并使用该响应的结果更新 state。
给出建议
redux-thunk 相对于其他中间件可能有一点陈旧的味道，但它还是很有用的。它不是为新代码而设计的，但仍然在许多系统中得到广泛使用。使用 Redux Thunk，开发人员可以做出有意义的决定并提高代码的可读性。
结论
通过 redux-thunk 中间件，我们可以自定义函数并使用它们来管理 Redux Store 中的状态。在许多实际应用场景中，中间件允许开发人员对代码库进行大量增量更改。Redux Thunk 还使我们能够控制业务逻辑，尤其是在执行多个 HTTP 请求时，在我们的代码中包装所有异步操作非常方便。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67076e61d91dce0dc8686bf9