Redux Thunk

引言

Redux 是一个流行且开源的 JavaScript 库，主要用于管理应用程序的状态。它也常用于与 React 或 Angular 一起开发用户交互式界面。

此外，需要注意的是，Redux 的 action 是异步分派的。这对于需要与应用程序接口（API）连接以并行执行外部副作用的非平凡应用程序来说，是一个相当大的问题。Redux 也可以被视为一个中间件，用于处理 action 和 reducer 之间的分派和通信。由于 Redux 的 action 是异步分派的，有两个中间件库可以满足此需求：Redux-Saga 和 Redux Thunk。在这里，我们将讨论 Redux Thunk。

什么是 Redux Thunk？

Thunk 在编程中是一个逻辑概念，用于处理一个函数，该函数主要用于延迟任何操作的计算或求值。

Redux Thunk 作为一种中间件，在调用 action creators 时，它会返回一个函数而不是一个对象。返回的函数接收来自 store 的 dispatch 方法，然后在异步操作完成后，在函数体内用于同步地 dispatch。让我们继续讨论 Redux Thunk，以及它的安装和使用。

安装

在设置 Redux Thunk 之前，我们需要设置依赖项，因为它同时适用于客户端和服务器端。你可能需要在你的系统上预装 node 或 yarn。运行下面显示的命令。

一旦你启动了你的 yarn 或 node 服务器，现在是设置中间件的时候了。Redux Thunk 是一种介于 action 和 reducer 之间的中间件，可以改变状态的行为方式。在你的 index.js 文件中，我们需要使用 compose 方法来添加一个 store。输入下面显示的命令。

或者，如果你想在我们的 React 应用程序中添加一个设计组件，我们可以使用 Redux Thunk 来设置中间件。为此，我们修改了上面的代码，包含了 HTML 和 CSS 组件，如下所示。

现在，Redux thunk 已被导入并应用于你的应用程序。

在示例应用程序中使用 Redux Thunk。

使用 Redux Thunk 的主要目标是建立与外部 API 的异步通信，用于获取和保存数据。它使得 dispatch action 更加容易，这些 action 遵循了与外部 API 请求的整个生命周期的范例。

例如，考虑我们正在创建一个井字棋游戏。在开始创建游戏之前，可能需要 dispatch 一个 action。如果创建成功，我们也需要 dispatch 另一个 action，因为游戏涉及多个步骤。如果出现错误，我们可能会将详细信息保存在服务器上，这可以通过创建另一个错误 action 并将其 dispatch 到你的容器组件中来实现。考虑下面游戏的代码示例。

在上面的代码片段中，我们看到了 addTickTackToe action creator 如何返回一个函数而不是一个常规对象。这个函数直接从 store 接收 dispatch 方法。如果我们观察函数体内部，第一个 dispatch 会立即执行一个同步 action，这个 action 表明你开始将数据保存到外部 API。如果我们收到服务器的响应，它就将 action 标记为成功，因为数据可能已从响应中获得。然而，如果发生错误，我们再次 dispatch 不同的同步 action，并附带错误消息。

我们可以考虑另一个使用 Redux Thunk 的例子，用于开始同步 dispatch action。考虑一个我们应用了中间件的 increment counter，如下所示。

注意：dispatch action 可以与上面定义的 increment 函数一起使用，并带有时间限制。我们以 1000 毫秒作为默认时间间隔。另外，dispatch 函数使用同步或异步 action 调用。

总结

在本文中，我们了解了 Redux 和 Redux Thunk 的基础知识。我们还了解了同步设置 action 的各种方法，以及 Redux Thunk 如何作为中间件来建立它们。需要记住的是，Redux 允许我们在创建和利用 store 的 React 应用程序中同步 dispatch action，并且依赖于外部 API 来实现数据的紧密集成。