什么是 Redux middleware
在 Redux 中，middleware 是一种处理 action 的机制，它允许我们在 action 到达 reducer 前拦截和处理它们。middleware 可以看作是一个函数，它接收 store 的 dispatch 和 getState 函数作为参数，返回值也是一个函数，接收下一个中间件或 reducer 并返回处理后的结果或将 action 传递给下一个中间件或 reducer。
为什么需要使用 middleware
使用 middleware 可以帮助我们处理一些异步操作或处理某些特定行为。例如，当我们使用 Redux 处理异步请求时，本来要发送多个 action，但使用 middleware 可以将这些 action 通过一定的规则合并成一个 action，从而简化操作。此外，使用 middleware 也可以让我们实现一些通用的逻辑，例如处理日志、处理路由跳转等操作。
Redux middleware 的实现方式
我们可以通过编写 middleware 函数来实现 middleware。一个 middleware 函数包含以下三个参数：
store：Redux 的 store 对象，我们可以通过它访问到 state 和 dispatch。next：下一个 middleware 函数或 reducer，通过调用 next(action) 可以将 action 传递给下一个 middleware 或 reducer。action：当前处理的 action 对象。
下面是一个最简单的 middleware 函数：
const simpleMiddleware = store => next => action => {
console.log(`Action type: ${action.type}`);
return next(action);
}这个中间件函数会在每个 action 执行前输出 action 的 type，然后将 action 传递给下一个中间件或 reducer 进行处理。
我们可以使用 applyMiddleware 函数来将 middleware 应用到 Redux 中：
import { createStore, applyMiddleware } from 'redux';
const store = createStore(
reducer,
applyMiddleware(simpleMiddleware)
);现在，我们使用 applyMiddleware 函数将 simpleMiddleware 应用于 Redux 中，它会被包装在内部的 dispatch 函数的周围，每当一个 action 被 dispatch，它就会被 simpleMiddleware 拦截和处理。
Redux middleware 的使用场景
下面是一些常见的 middleware 使用场景：
1. 异步请求处理
当我们在应用程序中需要处理异步请求时，我们可以使用 Redux Thunk middleware，它允许我们 dispatch 一个函数代替一个对象。从而在该函数中进行异步调用，最终处于该函数返回结果的操作仍然是同步的。
import thunkMiddleware from 'redux-thunk';
const asyncMiddleware = store => next => action => {
if (typeof action === 'function') {
return action(store.dispatch, store.getState);
}
return next(action);
}
const store = createStore(reducer, applyMiddleware(asyncMiddleware, thunkMiddleware));使用 Redux Thunk 和 asyncMiddleware 中间件，我们可以 dispatch 一个函数来异步地获取数据，并在获取完数据后 dispatch 另一个 action 对数据进行处理。
2. 自定义中间件
我们还可以根据具体的项目需求编写自定义中间件。例如，在开发过程中，我们可能希望检查是否有未处理 error，如果有则进行处理并 dispatch 相应的 action 去提示用户。
const errorHandlingMiddleware = store => next => action => {
try {
return next(action);
} catch (error) {
store.dispatch({ type: 'SHOW_ERROR', error });
}
}3. 日志处理
在开发过程中我们需要获取更多的 debug 信息，我们可以通过日志中间件记录所有的 action 和 state 变化。
const loggerMiddleware = store => next => action => {
console.log('dispatching', action);
let result = next(action);
console.log('next state', store.getState());
return result;
}总结
本文介绍了 Redux middleware 的概念、原理、编写方法和使用场景。middleware 提供了钩子函数可以拦截和处理 action，这样我们可以根据具体业务需求，编写自己的 middleware 处理程序。使用 middleware 可以帮助我们简化开发并且提高代码的可复用性，建议在实际项目中加以使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65adff04add4f0e0ff788b30