Redux中间件源码解析与实现

// 引入Redux的applyMiddleware函数和compose函数
import { applyMiddleware, compose } from 'redux';
 
// 自定义的日志中间件
const logger = store => next => action => {
  console.log('dispatching', action);
  let result = next(action);
  console.log('next state', store.getState());
  return result;
};
 
// 自定义的异步中间件
const thunk = store => next => action =>
  typeof action === 'function' ? action(store.dispatch, store.getState) : next(action);
 
// 创建一个Redux store，并应用自定义的中间件
const createStoreWithMiddleware = compose(
  applyMiddleware(logger, thunk)
)(createStore);
 
// 使用自定义的createStoreWithMiddleware来创建store
const store = createStoreWithMiddleware(reducer);

这段代码首先引入了Redux的applyMiddleware和compose函数。然后定义了两个简单的中间件：logger和thunk。logger用于记录每次dispatch的action和更新后的state。thunk中间件允许dispatch函数接收一个thunk函数作为action，这样可以在store中进行异步操作。最后，使用compose和applyMiddleware将自定义的中间件应用到createStore上，创建了一个新的createStoreWithMiddleware函数，并使用这个新函数来创建Redux store。