在 React 应用中，Redux 是一个极其重要的数据管理工具。它的存在可以使得数据的流动变得更加清晰和易读。中间件作为 Redux 的一个特性，为我们提供了很大的便利，尤其是在应对异步数据处理时。本文将从头开始介绍如何创建一个 Redux 的中间件，为读者提供一个深度学习和指导的路线，并包含示例代码。
什么是 Redux 中间件
首先，我们来回顾一下 Redux 的一般架构。Redux 最核心的概念之一便是 action。当我们在应用中触发某一个事件时，我们需要创建一个 action 对象，该对象通常包含一个识别该事件的 type 属性和一些相关的数据。然后，我们通过 dispatch 方法把这个 action 对象发送到一个叫做 reducer 的函数中，该函数将根据这个事件的类型和相关数据来更新 Redux Store 中的 state。
Redux 的中间件则是介于 aciton 被派发和 reducer 执行之间的扩展。当一个 action 被派发时，它可以在到达 reducer 之前经过一个或多个中间件。这种设计使得我们可以在派发 action 和最终更新 state 之间加入一些预处理、后处理等复杂逻辑。一个简单的示意图如下：
dispatch(action) -> middleware1 -> middleware2 -> ... -> reducer -> new state
举个例子，当我们的应用需要发送一个异步请求时，我们希望请求被发出并刷新 UI，但是我们不能保证请求总是成功的。当请求失败的时候，我们需要通知用户，或者记录请求的错误信息。这个时候，我们可以利用一个中间件，预处理 action 对象，发送一个开始请求的 action，当请求完成的时候发送请求结果的 action，并且在出错的时候发送一个请求失败的 action。
下面让我们通过一个简单的中间件实现来更好地理解 Redux 中间件的机制。
如何编写一个简单的中间件
一个 Redux 中间件本质上是一个函数，它将接收到派发的 action 对象。如果实现了一个自定义的 Redux 中间件，那么这个函数应该返回一个接受下一个中间件的函数。如果这个函数没有下一个中间件，那么它应该返回原样出来的 action 或者是一个被修改过后的新的 action。
下面我们来实现一个简单的中间件。这个中间件通过监听某些特定的 action，以回调的方式执行开发者传入的函数。这种技术通常被应用在处理 action 的日志记录、性能分析、异常处理等场景中。
const loggerMiddleWare = store => next => action => {
console.log("Dispatching action:", action);
const result = next(action);
console.log("Next state:", store.getState());
return result;
};这个中间件的参数 store 其实就是 Redux Store 的实例，可以通过它来访问 Store 的数据。函数体内的打印信息告诉我们派发的 action 和变更后的 state。
如何注册中间件
我们可以通过 Redux 的 createStore() 函数来创建一个 Store，该函数将三个参数传入：reducer、初始 state 和 middleware。其中，middleware 可以是一个数组，这样我们可以使用多个中间件。
下面是将上述 logger 中间件注册到 Store 内的代码：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------- ---- ------------- ------ ---------------- ---- ---------------------- ----- ----- - ------------ -------- --------------------------------- -- ------ ------- ------
如何执行异步操作
Redux 对于异步操作的实现还是非常巧妙的。我们可以利用中间件的机制来编写一个非常通用的用于处理异步操作的 middleware。
const asyncMiddleware = store => next => action => {
if (typeof action === 'function') {
return action(store.dispatch, store.getState);
}
return next(action);
};在上面的代码中，中间件首先检查例如 Promise 或者一个返回 Promise 的函数作为 action 的 payload。如果是 Promise，则在它 resolve 之后才进行之后的 dispatch。如果 action 没有 payload，或者 payload 不是一个 Promise，则将 action 直接传入下一个中间件。
总结
通过这篇文章，我们学习了如何编写一个 Redux 中间件，以及该如何在应用内使用多个中间件来处理异步操作等场景。中间件这一概念从某种程度上来说可以理解为链式调用思想的一种体现，它可以大大简化代码的逻辑，并提升 React 应用的代码可维护性和可扩展性。
参考资料
- Redux 文档 https://redux.js.org/api/applymiddleware
- 《深入 React 技术栈》- 陈屹著
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d77a0968c7c53b0840b5f