Redux 中间件如何获取 Store 和 Action 并进行处理

在Redux中，中间件是一个函数，它包装了store的dispatch方法，允许它看到每个action，并可以在发送给store的reduce函数前后做一些处理。

以下是一个简单的中间件示例，它记录发送到store的action，并在action被处理前打印一个日志：

const logger = store => next => action => {
  console.log('Dispatching:', action)
  let result = next(action)
  console.log('New state after dispatch:', store.getState())
  return result
}
 
const applyMiddleware = (...middlewares) => createStore => (reducer, preloadedState) => {
  const store = createStore(reducer, preloadedState)
  let dispatch = store.dispatch
  let chain = middlewares.map(middleware => middleware(store))
  dispatch = compose(...chain)(store.dispatch)
  return {
    ...store,
    dispatch
  }
}
 
const store = createStore(reducer, applyMiddleware(logger))

在这个例子中，logger函数是一个中间件，它接收store作为参数，返回一个新的dispatch方法，该方法又返回一个新的next函数，该函数最终返回由store.dispatch调用的结果。

applyMiddleware函数是Redux内置的用于应用多个中间件的函数，它返回一个新的createStore方法，该方法可以创建一个已经应用了中间件的store。

使用applyMiddleware时，只需要将它作为最后一个参数传递给createStore即可。在这个例子中，我们创建了一个带有logger中间件的store。