引言
在前端开发中，Redux 是一个非常流行的状态管理库，它可以将应用程序的状态集中管理。Redux中的 action 是描述应用程序发生变化的普通对象，这些 action 会被派发到 reducer 中进行处理。 Thunk 中间件可以让我们在 action 中使用异步操作。而 Redux-Thunk 是一个针对 Redux 开发的强大异步操作中间件。它允许我们在 action 中返回一个函数，这个函数可以在异步操作完成后再派发对应的 action。
下面我们将对 Redux-Thunk 进行详细介绍和使用方法，同时也会给出示例代码。
Redux-Thunk 详解
什么是 Thunk
在学习 Redux-Thunk 之前，先要理解什么是 Thunk。Thunk 通常指的是一种编程技术，它是指任何返回另一个函数的函数。我们来看一个简单的例子：
-- -------------------- ---- -------
-------- ------ -- -
------ - - --
-
-------- ----------- -- -
------ ---------- -
------ - - --
-
-
------------------ ---- -- -
--- -------- - ----------- ---
------------------------ -- -在上面的代码中，add 函数是接受两个参数并返回它们的和。而 thunkAdd 函数返回了一个函数，这个函数输出了传入的两个参数的和。当我们调用 thunkAdd 时不会得到计算结果，而是获取到的是一个函数，我们可以在需要的时候调用这个函数。这就是 Thunk 的原理。
在 Redux 中，Thunk 的作用就是提供一个延迟执行的函数，直至异步操作完成后再执行。 Thunk 中间件可以让我们在 action 中使用异步操作，并且可以控制 dispatch 的时机。
Redux-Thunk 的作用
在 Redux 中，Thunk 中间件的作用非常强大。 它使我们能够在 Action Creator 的返回对象中返回一个函数，而不再是一个普通对象。返回的函数可以在异步操作完成时手动调用 dispatch 方法进行状态更新。
Redux-Thunk 的优点
- 简单易用。 Redux-Thunk 非常容易上手，即使你没有相关的经验，也可以快速入手并进行开发。
- 处理异步操作。 Redux-Thunk 允许我们派发一个函数，这个函数可以处理异步操作。
- 处理多个 Action。 Redux-Thunk 允许我们在同一个 Action Creator 中派发多个 Action。这可以简化代码，并且使得逻辑更加清晰。
Redux-Thunk 的缺点
- 学习曲线较陡。对于初学者来说，学习 Redux-Thunk 可能会有些困难。
- 没有 typescript 支持。 目前，Redux-Thunk 还没有提供 TypeScript 支持。
Redux-Thunk 的使用
使用 Redux-Thunk 中间件需要安装 redux-thunk 包。可以使用 npm 命令安装。
npm install --save redux-thunk
接下来，我们需要在我们的项目中使用 applyMiddleware 方法进行中间件配置。 applyMiddleware 用于将中间件与 Redux Store 绑定，并将中间件应用于每个 dispatch 的操作。
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));在配置了 thunk 中间件之后，我们就可以在我们的 action 中使用异步操作了。
下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ------------- - -- -- -
------ -------- -- -
---------------------------------
------ -----------------------------------------
-------------- -- ----------------
---------- -- -
-------------------------------------
--
------------ -- -
--------------------------------------
---
--
--
----- -------------------- - -- -- -
------ -
----- ----------------------
--
--
----- -------------------- - -------- -- -
------ -
----- -----------------------
-------- --------
--
--
----- -------------------- - ----- -- -
------ -
----- -----------------------
-------- -----
--
--在上面的代码中，我们定义了一个 fetchProducts action creator，它返回了一个函数。这个函数接受一个 dispatch 方法作为参数。在这个函数中，我们首先派发一个 FETCH_PRODUCTS_REQUEST action，然后向服务端发起请求，并在异步操作完成后再派发对应的 FETCH_PRODUCTS_SUCCESS 或 FETCH_PRODUCTS_FAILURE 。
运行示例代码，我们会在控制台中看到以下信息：
{type: "FETCH_PRODUCTS_REQUEST"}
{type: "FETCH_PRODUCTS_SUCCESS", payload: Array(2)}这是 Redux 在我们的 action 中添加异步逻辑后派发的 action。
总结
在本文中，我们详细介绍了 Redux-Thunk 中间件的作用、优缺点和使用方法，并给出了一个简单的示例代码。 Redux-Thunk 允许我们在 action 中使用异步操作，并且可以让我们在异步操作完成后再派发对应的 action。在日常开发中， Redux-Thunk 是非常重要的一个中间件。学习并掌握它对我们的前端工作非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645776f8968c7c53b0a288e2