Redux 是现在前端中应用最广泛的状态管理工具之一，而 Middleware 则是 Redux 中非常重要的一个概念。本文主要介绍 Redux Middleware 是如何工作的，以及如何编写自己的 Middleware。
Middleware 是什么？
在 Redux 中，Middleware 是一个类似于插件的概念，它可以拦截 Redux 中的 action，并进行一些额外的操作，比如打印日志、异步请求、路由跳转等等。Middleware 接收到的参数包括 Store 的 getState/dispatch 方法和 next 函数，next 函数是调用下一个 Middleware 的方法，如果当前 Middleware 是最后一个 Middleware，则 next 会直接调用 reducer。
下面是一个简单的示例 Middleware：
const logger = store => next => action => {
console.log('dispatching', action);
const result = next(action);
console.log('next state', store.getState());
return result;
};这个 Middleware 会在每次 dispatch action 时，打印当前 action 和下一个 state。
Middleware 的应用
在 Redux 中，Middleware 有很多的应用场景，在这里介绍几个常见的场景。
日志记录
在开发过程中，我们经常需要打印出 action 和 state，以便我们更好的理解应用程序的行为。这个时候，我们就可以编写一个 Middleware 来完成这个任务。
const logger = store => next => action => {
console.log('dispatching', action);
const result = next(action);
console.log('next state', store.getState());
return result;
};当我们使用这个 Middleware 时，每次 dispatch action 的时候，都会打印出 action 和 state。
异步请求
在 Redux 中，我们通常会把异步请求放在 action 中，但是有时候我们需要在 Middleware 中进行异步操作，比如中间件发送请求并处理响应，然后触发一些 action。例如：
-- -------------------- ---- -------
----- ----------- - --------------
----- ----------- - --------------
----- ----------- - --------------
----- ------------- - -- -------- -- -- ---- -- ------ -- -
-- ------------ --- ------------ -
-------------
-------
-
-----------------
-------------- -- ----------------
---------- -- -
---------- ----- ------------ ---- ---
--
--------- -- -
---------- ----- ----------- ---
---
--
----- --------- - --- -- -- ----- ------------ --- ---当我们调用了 fetchData(url) 的时候，它返回的 action 包括了 url，Middleware 可以根据这个 url 发送请求并处理响应，然后触发新的 action。
路由跳转
在 React Router 中，我们希望路由和 Redux 状态完全分离，这个时候我们需要自己编写一个 Router Middleware，来处理路由跳转操作。
-- -------------------- ---- -------
----- ---------------- - ------- -- ----- -- ---- -- ------ -- -
-- ------------ --- ------- -
-----------------------------
- ---- -- ------------ --- ---------- -
--------------------------------
- ---- -
------ -------------
-
--这个 Middleware 接收一个 history 对象，并根据 action 的类型来进行路由跳转操作。
编写自己的 Middleware
编写自己的 Middleware 可以帮助我们更好地理解 Redux 的工作流程，下面是一个编写 Middleware 的例子：
const timeMiddleware = store => next => action => {
console.log('Time: ', new Date().toLocaleTimeString());
return next(action);
}这个 Middleware 会在每次 dispatch action 时，打印当前的时间。
总结
本文主要介绍了 Redux 中的 Middleware，Middleware 是 Redux 中非常重要的一个概念，它可以拦截 action，并进行一些额外的操作。本文还介绍了 Middleware 的应用场景，例如日志记录、异步请求、路由跳转等等。最后，我们还介绍了如何编写自己的 Middleware。希望读者通过本文能够更好地理解 Redux 中 Middleware 的工作流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a75054add4f0e0ff052098