什么是 Redux middlewares
Redux middlewares 是一种可以在 Redux 中扩展功能的机制。它为我们提供了一个拦截 Redux 的 action 和 state 访问的管道，使我们能够对这些操作进行自定义处理，例如异步请求、日志跟踪等等。
一个 Redux middleware 是一个函数，它接收 store.dispatch 和 store.getState 方法，并返回一个函数，这个函数将接收一个 next 参数，表示下一个 middleware 的处理函数，最终返回一个接收 action 参数的函数。
const loggerMiddleware = store => next => action => {
console.log('dispatching', action)
const result = next(action)
console.log('next state', store.getState())
return result
}上面的代码是一个简单的 logger middleware，它会在 action 被 dispatch 后打印出 action 和当前 state（dispatching 和 next state）的值。
如何使用 Redux middlewares
要使用一个 middleware，我们需要在创建 store 的时候将其注入到 createStore 函数中。
import { createStore, applyMiddleware } from 'redux'
const store = createStore(
rootReducer,
applyMiddleware(loggerMiddleware) // 注册中间件
)我们可以使用 applyMiddleware 函数包装我们自己的中间件，并将包装后的函数传递给 createStore 函数，从而应用中间件。
如何编写一个 Redux middleware
编写一个 Redux middleware 可以按照以下步骤进行。
定义中间件
定义一个接收 store 参数的函数，返回一个接收 next 参数的函数，最终返回一个接收 action 参数的函数。
const myMiddleware = store => next => action => {
// 中间件处理逻辑
return next(action)
}编写中间件处理逻辑
中间件可以对 action 进行一系列的处理，例如修改 action 的内容、执行异步请求、打印日志等等。
-- -------------------- ---- -------
----- ------------- - ----- -- ---- -- ------ -- -
-- ------ --- --- ------
-- ------------ --- -------------- -
------ -------------------
--------- -- -----------
---------- -- -
-- ---------------- ---------- --
------ ------ ----- ------------ -------- ---- --
--
-
------ ------------
-上面的代码是一个执行异步请求的 middleware，在匹配到 FETCH_USERS action 时会执行一个 API 请求，并将接收到的数据封装成 SET_USERS action，然后将 SET_USERS action 交给下一个 middleware 处理。
注册中间件
将编写好的中间件通过 applyMiddleware 函数注册到 store 中。
import { createStore, applyMiddleware } from 'redux'
const store = createStore(
rootReducer,
applyMiddleware(apiMiddleware)
)如何优化 Redux middlewares
由于每个 middleware 在处理一个 action 时都需要依次将其传递给下一个 middleware，因此 middleware 的顺序会影响到整个系统的性能。
优化 middleware 的顺序，可以通过将拥有大量逻辑的 middleware 放在队列的最后一步，而将处理逻辑简单的 middleware 放在前面，可以避免出现重复的处理逻辑，从而提高整体性能。
总结
Redux middlewares 是一种非常强大的技术，它为处理 Redux 中的 action 和 state 提供了灵活的方式，使我们在处理异步请求、日志打印等方面更加得心应手。
本文介绍了 Redux middlewares 的基本用法、编写和优化方法，并通过简单的示例代码展示了其效果。希望能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503f66a95b1f8cacd0b56d2