React 对 Redux 中间件的理解

React 对 Redux 中间件的理解主要体现在对 Redux 的可组合性和扩展性上。Redux 中间件是一种机制，它使开发者能够包装（wrap）dispatch 方法来执行各种操作，例如日志记录、异步操作、异常处理等。

Redux 中间件的工作原理是使用 applyMiddleware 函数将所有中间件组合在一起，并将它们链式地包装了 store 的 dispatch 方法。

以下是一个简单的自定义 Redux 中间件示例，它用于记录每次 dispatch 的 action：

const logger = store => next => action => {
  console.log('Dispatching:', action)
  let result = next(action)
  console.log('Next state:', store.getState())
  return result
}
 
const appReducer = (state = {}, action) => {
  // Reducer logic here
}
 
const store = createStore(
  appReducer,
  applyMiddleware(logger)
)
 
// 使用 store 的 dispatch 方法时，logger 中间件会打印出相关的 action 和状态变化
store.dispatch({ type: 'ACTION_TYPE' })

在这个例子中，logger 是一个创建中间件的函数，它返回一个闭包。这个闭包接受 Redux store 作为参数，并返回另一个闭包，后者也接受 next （即下一个 dispatch 方法）作为参数，并返回一个新的闭包，这个闭包就是实际被调用来处理 action 的函数。这个闭包在调用时会打印出 action 和之后的状态，然后调用 next(action) 继续 action 的处理流程。