前言
在前端开发中，有时候需要进行异步操作，例如从服务器获取数据或者进行 API 调用等。在 React 中使用 Redux 可以更好地管理和组织应用的状态，但是 Redux 只支持同步 action，不支持异步 action。为了解决这个问题，开发者可以使用 Redux 中间件 - redux-thunk。
redux-thunk 是 Redux 官方推荐的中间件之一，它可以使 action 创建函数返回一个函数而不是一个对象。这些返回的函数可以在异步操作完成后再 dispatch action。本文将详细介绍 redux-thunk 的原理和使用方法。
原理解析
Redux 中间件
在介绍 redux-thunk 之前，我们先了解一下 Redux 中的中间件。在一个 Redux 应用中，当一个 action 发起时，它会被依次处理并影响应用的状态。Redux 中间件的作用就是在这些 action 之间运行一些额外的代码，中间件可以在处理 action 前后执行某些功能。
在 Redux 中，一个中间件是一个函数，它接收 store 的 dispatch 和 getState 函数作为参数，并返回一个函数，这个函数可以接收下一个中间件作为参数，也可以直接调用 store 的 dispatch 函数。
以下是一个简单的中间件实现，它可以在每次 dispatch action 前后输出一行日志。
const logger = store => next => action => {
console.log("dispatching", action);
let result = next(action);
console.log("next state", store.getState());
return result;
}redux-thunk 的实现
redux-thunk 是 Redux 的一个中间件，它可以让 action 创建函数返回一个函数，而不是一个对象。这个返回的函数可以在异步操作完成后再 dispatch action。
redux-thunk 的实现非常简单，它只需要判断 action 是否为函数，如果是函数，就执行这个函数，并将 dispatch 和 getState 函数作为参数传递给它。如果不是函数，就交给下一个中间件处理。
以下是 redux-thunk 的代码实现：
const thunk = ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState);
}
return next(action);
};可以看到，当 action 是一个函数时，它会执行这个函数，并把 dispatch 和 getState 函数作为参数传递给它。action 函数实现异步操作后，再 dispatch action。
使用示例
以下是一个简单的使用示例，展示如何使用 redux-thunk 处理异步操作。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
-- ------- --
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-
-- ------ ----
-------- ---------------- -
------ -------- -- -
------------- -- -
---------- ----- ----------- ---
-- ------
--
-
-- -- -----
----- ----- - -------------------- ------------------------
-- -- ------ ----
---------------------------------在这个示例中，我们定义了一个 counter reducer，和一个 incrementAsync action 创建函数。incrementAsync 函数是一个异步操作，在一秒后 dispatch 一个 INCREMENT action。
我们使用 createStore 函数创建了一个 store，并将 applyMiddleware 函数和 redux-thunk 中间件传递给它，然后调用 incrementAsync 函数，实现了一个异步操作。
总结
本文详细介绍了 Redux 中间件之 redux-thunk 的原理和使用方法。可以看到，redux-thunk 通过返回一个函数来实现异步操作，使得代码更加灵活、简洁。
在实际开发中，我们经常需要进行各种异步操作，例如从服务器获取数据、调用第三方 API 等。使用 redux-thunk，可以使异步操作更加易于管理，避免了回调地狱等问题，提高了代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460c618968c7c53b02662f4