react中间件的理解

React中间件是用于包装或者拦截dispatch的函数。它们使得在发送action前或者接收到state后进行一些操作成为可能。这些操作可能包括log、store的同步、异步action的处理、state的转换等。

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

const logger = store => next => action => {
  console.log('Dispatching:', action)
  let result = next(action)
  console.log('Next state:', store.getState())
  return result
}
 
// 使用Redux的applyMiddleware函数将中间件应用到store
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers'
 
const store = createStore(
  rootReducer,
  applyMiddleware(logger)
)

在这个例子中，logger就是一个简单的中间件。它接收store作为参数，返回一个函数，该函数又返回一个新的函数，这个新的函数就是用来拦截dispatch的。在这个拦截的函数里，它首先打印出正在被dispatch的action，然后调用next(action)来继续dispatch，接着打印出新的state，最后返回next(action)的结果。

这个中间件的使用方法是将其作为参数传递给Redux的applyMiddleware函数，然后将返回的结果传递给Redux的createStore函数。这样就可以在每次dispatch action的时候，记录下相关的日志。