React更偏向于构建UI，虽然也能进行状态管理，但是面对大型复杂的项目，往往会面临跨组件通信，这时候就可以使用Redux。Redux是一种状态管理容器，他可以将组件用到的所有数据都保存在store中。

createStore

createStore(reducer, initialState, enhancer)用于创建一个store，第一个参数reducer用来修改store中的state，initialState为初始的state，enhancer是一个增强器，如果项目使用middleware的话，enhancer就是applyMiddleware的返回值，如果没有用middleware，则enhancer不传，

  1. export default function createStore(reducer, initialState, enhancer) {
  2.      // ...
  3.   if (typeof enhancer !== 'undefined') {
  4.     if (typeof enhancer !== 'function') {
  5.       throw new Error('Expected the enhancer to be a function.')
  6.     }
  7.         // 如果存在enhancer：enhancer(createStore)返回一个增强的（使用了middleware）createStore
  8.     return enhancer(createStore)(reducer, initialState)
  9.   }
  10.     // ...
  11.   function dispatch(action) {
  14.     try {
  15.       isDispatching = true
  16.       currentState = currentReducer(currentState, action)
  17.     } finally {
  18.       isDispatching = false
  19.     }
  21.     return action
  22.   }
  24.   // State 是只读的，唯一改变 state 的方法就是触发 action，
  25.   // reducer根据action返回一个新的state
  26.   function getState() {
  27.     return currentState
  28.   }
  29.   //如果不存在enhancer，则返回的store是这样的
  30.   return {
  31.     dispatch,
  32.     subscribe,
  33.     getState,
  34.     replaceReducer,
  35.     [$$observable]: observable
  36.   }
  37. }

applyMiddleware

我们在上面说过了，applyMiddleware创建一个store的增强器，之所以增强，是因为dispatch被增强了，他是在原来的dispatch上附加了很多功能，具体是怎么实现的的，我们一起往下看

先给出中间件的写法

  1. const middleware1 = middlewareAPI => next => action => {
  2.   console.log('m1 start')
  3.   const result =  next(action)
  4.   console.log('m1 end')
  6.   return result
  7. }
  9. const middleware2 = middlewareAPI => next => action => {
  10.   console.log('m2 start')
  11.   const result =  next(action)
  12.   console.log('m2 end')
  14.   return result
  15. }
  2. export default function applyMiddleware(...middlewares) {
  3.   return createStore => (...args) => {
  4.     const store = createStore(...args)
  5.     let dispatch = () => {
  6.       throw new Error(
  7.         'Dispatching while constructing your middleware is not allowed. ' +
  8.           'Other middleware would not be applied to this dispatch.'
  9.       )
  10.     }
  12.     const middlewareAPI = {
  13.       getState: store.getState,
  14.       dispatch: (...args) => dispatch(...args)
  15.     }
  16.     // 将上面两个middleware传入applyMiddleware，得到
  17.     // chain = [dispatch1, dispatch2]
  18.     const chain = middlewares.map(middleware => middleware(middlewareAPI))
  19.     dispatch = compose(...chain)(store.dispatch)
  21.     return {
  22.       ...store,
  23.       dispatch
  24.     }
  25.   }
  26. }
  28. // chain = [chain1, chain2]
  29. const chain1 = next => action => {
  30.   console.log('m1 start')
  31.   const result =  next(action)
  32.   console.log('m1 end')
  34.   return result
  35. }
  37. const chain2 = next => action => {
  38.   console.log('m2 start')
  39.   const result =  next(action)
  40.   console.log('m2 end')
  42.   return result
  43. }

compose

compose方法最核心的就是使用Array.prototype.reduce，具体使用方法可以查看MDN，经过reduce之后得到的结果

  1. export default function compose(...funcs) {
  2.   if (funcs.length === 0) {
  3.     return arg => arg
  4.   }
  6.   if (funcs.length === 1) {
  7.     return funcs[0]
  8.   }
  10.   return funcs.reduce((a, b) => (...args) => a(b(...args)))
  11. }
  13.  // compose(f, g, h) ====> (...args) => f(g(h(...args)))
  14.  // composeResult = compose(...chain) = (...args) => chain1(chain2(...args))
  15. // dispatch = chain1(chain2(defaultDispatch))

新dispatch

我们用defaultDispatch表示最开始创建的dispatch(createStore中的dispatch)，来看一下最后经过middleware包装过的dispatch长啥样

  1. const chain1 = next => action => {
  2.   console.log('m1 start')
  3.   const result =  next(action)
  4.   console.log('m1 end')
  6.   return result
  7. }
  9. const chain2 = next => action => {
  10.   console.log('m2 start')
  11.   const result =  next(action)
  12.   console.log('m2 end')
  14.   return result
  15. }
  17. dispatch = chain1(chain2(defaultDispatch))
  19. dispatch2 = action => {
  20.   console.log('m2 start')
  21.   const result =  defaultDispatch(action)
  22.   console.log('m2 end')
  24.   return result
  25. }
  27. dispatch1 = action => {
  28.   console.log('m1 start')
  29.   const result =  dispatch2(action)
  30.   console.log('m1 end')
  32.   return result
  33. }
  35. dispatch = action => {
  36.   console.log('m1 start')
  37.   // const result =  dispatch2(action)
  38.   // ----------------------------------
  39.   console.log('m2 start')
  40.   const result =  defaultDispatch(action)
  41.   console.log('m2 end')
  42.  // ----------------------------------
  43.   console.log('m1 end')
  45.   return result
  46. }

这里也展示了middleware是洋葱模型，中间件的访问顺序是外 => 内 => 外，最内部其实是调用最原生的(createStore中定义的)dispatch，来调用reducer生成最新的state

另外可以看到middlewareAPI中的dispatch是

  1. const middlewareAPI = {
  2.       getState: store.getState,
  3.       dispatch: (...args) => dispatch(...args)
  4.     }

而不是

  1. const middlewareAPI = {
  2.       getState: store.getState,
  3.       dispatch: dispatch
  4.     }

是因为这里使用的是闭包，这样可以将经过中间件生成新的dispatch传给每一个中间件。