前言
在 Redux 中，我们可以通过定义 actions 来描述应用程序中的一些事件。但是，通常情况下，这些事件并不都是同步的，我们需要通过异步操作来处理一些复杂或者慢速的事件，例如网络请求或者读写文件等等。在这种情况下，我们需要额外的工具来帮助我们实现异步操作。本文将介绍如何使用 Redux 中间件来实现异步的 action 处理。
Redux 中间件的基础概念
在 Redux 中，不同于 action 同步地改变 state，我们可以使用中间件来增强 action 的行为。中间件是一种函数，它接收 store 的 dispatch 和 getState 函数作为参数，并返回一个函数。这个返回的函数接收下一个中间件的 dispatch 函数作为参数，并返回一个同样可以接收 action 的函数。这个函数也可以直接返回数据，也可以 dispatch 更改 state 的 action。
中间件将 action 处理与 dispatch 分离开来，使得我们可以对 action 进行更加丰富的控制和处理，例如记录日志、解析异步操作等。
为了更好地理解中间件工作方式，以下代码是一个简单的 logger 中间件样例。
const loggerMiddleware = store => next => action => {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}这个中间件可以打印每个 action 发送和处理后的 state。为了使用这个中间件，我们需要使用 Redux 的 applyMiddleware 函数。
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers'
import loggerMiddleware from './middleware/logger'
const store = createStore(
rootReducer,
applyMiddleware(loggerMiddleware)
)Redux 异步 Action
Redux 异步 Action 通常是指那些涉及到异步操作的 Action，比如网络请求或者读写文件等等。简单来说，就是 Action 不是直接修改 state，而是引起异步操作后再修改 state。在 Redux 中，实现异步 Action 的常见方式有三种：
在 Action 的 payload 中添加异步操作结果，但是这种方式破坏了 Action 只包含描述操作的元数据的原则。
等待异步操作结果后再 dispatch 另外一个 Action。这种方式需要复杂的事件和逻辑处理。
使用中间件处理异步 Action。这种方式非常简单和直接，且不会破坏 Action 的一致性。
Redux-thunk 中间件
Redux-thunk 是一个流行的 Redux 中间件，它允许 Action 可以返回一个函数而不是一个对象。这个函数可以接受 dispatch 和 getState 作为参数，可以异步 dispatch 一个或多个 Action。
以下是一个使用 Redux-thunk 处理异步操作的示例。
首先，我们需要安装 Redux-thunk。
npm i redux-thunk
然后将它放到 applyMiddleware 函数中，以便在 Redux 中使用。这是一个示例代码：
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware)
)现在我们可以使用 thunk Action 的形式来 dispatch 异步操作了，如下所示：
export const fetchData = () => dispatch => {
dispatch({ type: 'FETCH_DATA_REQUEST' })
return fetch('/api/data')
.then(res => res.json())
.then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
.catch(err => dispatch({ type: 'FETCH_DATA_FAILURE', payload: err }))
}在这个代码中，我们定义了一个名为 fetchData 的 Action，它接受 dispatch 作为参数，并返回一个包含异步操作的函数。该函数内的代码将依次执行如下内容：
dispatch 起始 Action 'FETCH_DATA_REQUEST'，用于通知组件异步操作已经开始。
发送异步请求并等待响应。
根据响应更新或者 dispatch 错误的 Action。
结论
在 Redux 中实现异步操作并不是一个难题。我们可以通过 Redux-thunk 或者其他的中间件，提供简单且易于理解的解决方案。这样，我们可以很容易地描述应用程序中的异步操作，并将 Action 的状态变化与 API 调用分开。同时，这种方式也保证了 Action 的一致性，并遵循了 Redux 的工作原则。
参考代码
完整的代码可以参考以下示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ --------------- ---- -------------
------ ----------- ---- ------------
----- ----- - ------------
------------
--------------------------------
-
------ ----- --------- - -- -- -------- -- -
---------- ----- -------------------- --
------ ------------------
--------- -- -----------
---------- -- ---------- ----- --------------------- -------- ---- ---
---------- -- ---------- ----- --------------------- -------- --- ---
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f53c1cc5c563ced57189c7