前言
Redux 是一个非常流行的 JavaScript 应用程序的状态管理库，它的主要目的是让应用的状态变得可预测和易于调试。在 Redux 中，所有的应用状态都被存储在一个全局的 store 中，这个 store 中的状态可以被任何组件访问和修改。
在 Redux 中，所有的状态变化都是通过 dispatching actions 来触发的。这些 actions 可以是同步的，也可以是异步的。在本文中，我们将重点讨论如何使用 Redux 中的异步中间件来处理异步 actions。
异步 actions
在 Redux 中，异步 actions 是指那些需要异步处理的 actions，比如向服务器请求数据。在传统的 Redux 中，我们只能处理同步的 actions，而无法处理异步的 actions，这就需要使用 Redux 的异步中间件来解决这个问题。
Redux 异步中间件
Redux 异步中间件是一个函数，它接收 store 的 dispatch 方法和 getState 方法作为参数，并返回一个函数，这个函数将被用于处理异步 actions。在 Redux 中，有很多种不同的异步中间件可供选择，比如 redux-thunk、redux-saga 等等。
在本文中，我们将重点介绍 redux-thunk 中间件的使用方法。
redux-thunk 中间件
redux-thunk 是 Redux 中最简单和最流行的异步中间件之一。它允许我们 dispatch 一个函数，这个函数将在异步操作完成后被调用。
安装
要使用 redux-thunk 中间件，我们需要先安装它。可以使用 npm 或者 yarn 来安装：
npm install redux-thunk # 或者 yarn add redux-thunk
如何使用
使用 redux-thunk 中间件非常简单，只需要在创建 store 的时候将它作为 applyMiddleware 的参数传入即可：
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware)
);编写异步 actions
在使用 redux-thunk 中间件之前，我们需要先了解一下 Redux 中 action 的基本结构。
在 Redux 中，action 是一个普通的 JavaScript 对象，它必须包含一个 type 属性，用于描述这个 action 的类型。除了 type 属性之外，我们还可以在 action 中包含一些其他的数据。
在 redux-thunk 中，我们可以 dispatch 一个函数，这个函数将在异步操作完成后被调用。这个函数接收 dispatch 和 getState 两个参数，我们可以在这个函数中进行一些异步操作，最终调用 dispatch 函数来触发一个 action。
下面是一个简单的例子，演示了如何使用 redux-thunk 中间件来处理异步 actions：
-- -------------------- ---- -------
-- ---- ------
-------- ----------- -
------ -------- -- -
-- ------
-------------------------------------
-------------- -- ----------------
---------- -- -
-- --------- ------
---------- ----- --------------------- -------- ---- ---
--
------------ -- -
-- --------- ------
---------- ----- --------------------- ----- ---
---
--
-
-- -------- -- ------
----------------------------在上面的例子中，我们定义了一个名为 fetchData 的异步 action，它返回一个函数。在这个函数中，我们发起了一个异步操作，并在异步操作完成后调用 dispatch 函数来触发一个 action。
使用 async/await
如果你使用的是 async/await，那么也可以很方便地使用 redux-thunk 中间件来处理异步 actions。下面是一个使用 async/await 的例子：
-- -------------------- ---- -------
-- ---- ------
-------- ----------- -
------ ----- -------- -- -
--- -
-- ------
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
-- --------- ------
---------- ----- --------------------- -------- ---- ---
- ----- ------- -
-- --------- ------
---------- ----- --------------------- ----- ---
-
--
-
-- -------- -- ------
----------------------------在上面的例子中，我们使用 async/await 来处理异步操作，但是我们依然可以很方便地使用 redux-thunk 中间件来处理异步 actions。
总结
在本文中，我们介绍了 Redux 中的异步中间件，并重点介绍了 redux-thunk 中间件的使用方法。使用 redux-thunk 中间件，我们可以很方便地处理异步 actions，从而使我们的应用程序更加灵活和可扩展。如果你还没有使用 Redux 中的异步中间件，那么现在是时候开始学习了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662cff57d3423812e4a8589f