在前端开发中，我们经常会遇到需要异步获取数据并更新 Redux store 的情况。Redux 官方提供了一种异步 action 解决方案，本篇文章将详细介绍该解决方案，包括如何使用和注意事项。
Redux 异步 action 的问题
首先，我们需要明确 Redux 异步 action 的问题。在 Redux 中，所有的 action 都必须是纯函数，这意味着同样的输入会产生同样的输出，不会有任何的副作用。但是，当我们需要异步更新 Redux store 时，这个原则就会被打破，因为异步获取数据可能会有延迟，并且其结果不是同步地返回给 reducer。
Redux 官方提供的解决方案是使用中间件，其中最常用的是 thunk 中间件，它可以让我们将 action creator 改为返回一个函数而非对象，这个函数在运行时可以进行异步操作。下面我们来详细介绍 thunk 中间件及其使用方法。
Redux thunk 中间件
Redux 中间件是一个函数，它相当于对 dispatch 函数的一层拦截和扩展。其中，thunk 中间件就是一种延迟函数的中间件，它可以让我们的 action creator 返回一个函数，这个函数在被 dispatch 时才会真正执行。
基本的 thunk 中间件代码如下：
const thunk = ({dispatch, getState}) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState);
}
return next(action);
}在使用时，我们需要将该中间件在 createStore 的时候注册，代码如下：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
const store = createStore(
reducer,
applyMiddleware(thunk)
);在这个例子中，我们先引入了 createStore、applyMiddleware 和之前定义的 reducer，在 createStore 的时候我们使用了 applyMiddleware 方法来注册 thunk 中间件。这样，我们就可以使用 thunk 中间件了。
Redux 异步 action 使用方法
使用 thunk 中间件后，我们现在可以在 action creator 中返回一个函数了。下面是一个示例代码：
-- -------------------- ---- -------
-- -- ------ -------
----- ---------- - --------- -- -
------ ---------- --------- -- -
-- ------- ------- -- ----- - ------- --
---------- ----- --------------------- ---
-- --------
------ ---------------------------------------------------
-------------- -- ----------------
---------- -- -
-- ------- ------- -- ----- ----
----------
----- ----------------------
-------- - ---------- ------ ---------------------------- -- ----------- -
---
---
--
--
-- -- ------ -------
--------------------------------------在这个例子中，我们定义了一个 action creator fetchPosts，它使用了 thunk 中间件。在这个函数内部，它首先通知 reducer store 中 loading 状态发生了变化，然后发起异步请求数据，请求成功后通知 reducer store 中数据发生了变化。
最后，我们可以使用 store.dispatch 方法来调用这个 action creator。
Redux 异步 action 注意事项
使用 Redux thunk 中间件时，需要注意以下几点：
- action creator 返回的是一个函数，而不是一个对象；
- 函数内部必须手动 dispatch 一个新的 action；
- 异步请求数据必须放在函数内部，请求成功后再进行 dispatch。
遵循以上注意事项，在使用 Redux 异步 action 的时候就可以避免一些问题了。同时，我们还可以在函数的开始和结束，分别 dispatch 不同的 action，这样就可以实现更细粒度的控制了。
总结
Redux 异步 action 解决方案使用了 thunk 中间件，让我们的 action creator 可以返回一个函数而非对象，这个函数在运行时可以进行异步操作。在使用 thunk 中间件时，需要注意返回函数内部必须手动 dispatch 新的 action，并将异步请求数据放在函数内部。
在实际开发中，Redux 异步 action 是非常常用的一种解决方案，能够让我们更方便地进行异步操作和更新 Redux store 中的数据。希望本篇文章能够帮助你更好地理解和使用 Redux 异步 action。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f9a9f0f6b2d6eab311e3e4