Redux 是一种流行的前端状态管理库，它的核心思想是将应用的状态存储在一个单一的数据源中，通过派发 action 来改变状态。Redux 中间件是 Redux 可扩展性的关键因素之一，它可以用来处理 action，对状态进行异步操作或者记录日志等。本文将详细介绍 Redux 中间件的使用方法和两个常用的中间件：redux-logger 和 redux-thunk。
Redux 中间件的基本概念
在 Redux 中，中间件是指一个函数，它可以在 action 发送到 reducer 之前或之后执行某些操作。中间件可以访问 action 和当前状态，并且可以修改 action 或者状态。中间件是链式的，多个中间件可以形成一个中间件链，依次执行。
Redux 中间件的基本结构如下：
const middleware = store => next => action => {
// do something with action or state
return next(action);
};其中，store 是 Redux store 对象，next 是下一个中间件的引用，action 是当前的 action 对象。中间件可以在这个函数中执行自己的操作，然后将 action 传递给下一个中间件，或者直接返回结果。如果直接返回结果，那么 action 就不会被发送到 reducer，状态也不会改变。
redux-logger 中间件
redux-logger 是一个 Redux 中间件，用于记录应用程序的 action 和状态变化。它可以帮助开发人员更好地了解应用程序的行为，定位问题和调试。
使用 redux-logger 中间件需要先安装它：
npm install --save redux-logger
然后在应用程序中使用 applyMiddleware 函数将它加入中间件链中：
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(logger));这样就可以在控制台上看到 action 和状态的变化了：
redux-logger 还可以自定义输出格式和颜色，具体可以参考官方文档。
redux-thunk 中间件
redux-thunk 是一个 Redux 中间件，用于处理异步 action。它可以让 action 创建函数返回一个函数，而不是一个普通的 action 对象。这个返回的函数可以接收 dispatch 和 getState 函数作为参数，可以进行异步操作，然后派发一个或多个 action。
使用 redux-thunk 中间件需要先安装它：
npm install --save redux-thunk
然后在应用程序中使用 applyMiddleware 函数将它加入中间件链中：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));下面是一个使用 redux-thunk 中间件的示例代码。假设我们有一个异步操作，需要从服务器获取数据，然后将数据派发给 reducer。我们可以定义一个 action 创建函数，返回一个函数，这个函数可以在异步操作完成之后派发 action：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- --------- - -- -- -
------ -------- -- -
---------- ----- -------------------- ---
----------------------
-------------- -- -
---------- ----- --------------------- ----- ------------- ---
--
------------ -- -
---------- ----- --------------------- ------ ------------- ---
---
--
--在上面的代码中，fetchData 是一个 action 创建函数，它返回一个函数。这个函数接收 dispatch 和 getState 函数作为参数，可以进行异步操作，然后派发 action。在这个函数中，我们首先派发一个 FETCH_DATA_REQUEST action，表示正在请求数据。然后使用 axios 发送异步请求，并在请求成功或失败时派发相应的 action。
总结
Redux 中间件是 Redux 可扩展性的关键因素之一，它可以用来处理 action，对状态进行异步操作或者记录日志等。redux-logger 和 redux-thunk 是两个常用的中间件，分别用于记录应用程序的 action 和状态变化，以及处理异步 action。在使用 Redux 中间件时，需要注意中间件的顺序和使用方式，以确保正确的操作顺序和结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6631a767d3423812e4f5b51e