创建一个 React Store来存储应用中所有的 State，应用中应仅有一个 Store。

DEMO

先从一个 Demo 来开始源码分析：

  1. import { createStore } from 'redux'
  3. function todos(state = [], action) {
  4.   switch (action.type) {
  5.     case 'ADD_TODO':
  6.       return state.concat([action.text])
  7.     default:
  8.       return state
  9.   }
  10. }
  12. let store = createStore(todos, ['Use Redux'])
  14. store.dispatch({
  15.   type: 'ADD_TODO',
  16.   text: 'Read the docs'
  17. })
  19. console.log(store.getState())

上面的代码，我们就能得到state为['Use Redux', 'Read the docs']。

createStore 源码

方法：createStore(reducer, [preloadedState], [enhancer])
参数：

  1. reducer 是一个函数，该函数接收两个参数： state和action，且返回一个新的state
  2. preloadedState 初始时的state
  3. enhancer 是一个组合式的store creator的高阶函数，返回一个新的强化过的store creator。于middleware有些相似。

返回值： 一个新的state对象。

  1. export default function createStore(reducer, preloadedState, enhancer) {
  3.   // 有初始化函数state，且没有传第三参数，enhancer 即为 preloadedState 
  4.   if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
  5.     enhancer = preloadedState
  6.     preloadedState = undefined
  7.   }
  9.   if (typeof enhancer !== 'undefined') {
  10.     if (typeof enhancer !== 'function') {
  11.       // 不是空，且不是一个函数，报错
  12.       throw new Error('Expected the enhancer to be a function.')
  13.     }
  14.         // 对enhancer进行createStore处理，把reduce传进去
  15.     return enhancer(createStore)(reducer, preloadedState)
  16.   }
  18.   // reducer必需是一个函数
  19.   if (typeof reducer !== 'function') {
  20.     throw new Error('Expected the reducer to be a function.')
  21.   }
  23.   let currentReducer = reducer
  24.   let currentState = preloadedState
  25.   let currentListeners = []
  26.   let nextListeners = currentListeners
  27.   let isDispatching = false
  29.   function ensureCanMutateNextListeners() {
  30.     // 当这里指向同一个数组时，创建一个新的副本
  31.     if (nextListeners === currentListeners) {
  32.       nextListeners = currentListeners.slice()
  33.     }
  34.   }
  36.     // 返回当前的state
  37.   function getState() {
  38.     return currentState
  39.   }
  41.   // redux的订阅函数，订阅 dispatch
  42.   function subscribe(listener) {
  43.     if (typeof listener !== 'function') {
  44.       throw new Error('Expected the listener to be a function.')
  45.     }
  47.     if (isDispatching) {
  48.       throw new Error('')
  49.     }
  51.     let isSubscribed = true
  53.     ensureCanMutateNextListeners() // 每次调用，确保nextListeners变量是新的副本
  54.     nextListeners.push(listener)  // 存储订阅者
  56.     // 返回一个可以取消订阅的函数
  57.     return function unsubscribe() {    
  58.       if (!isSubscribed) {
  59.         return
  60.       }
  62.       if (isDispatching) {
  63.         throw new Error('')
  64.       }
  66.       isSubscribed = false
  68.       ensureCanMutateNextListeners()
  69.       const index = nextListeners.indexOf(listener)
  70.       nextListeners.splice(index, 1)
  71.       currentListeners = null
  72.     }
  73.   }
  75.     // 派发函数，用于触发 reducer 修改 state
  76.   function dispatch(action) {
  77.     if (!isPlainObject(action)) {  // action 必需是对象
  78.       throw new Error(
  79.         'Actions must be plain objects. ' +
  80.           'Use custom middleware for async actions.'
  81.       )
  82.     }
  84.     if (typeof action.type === 'undefined') {  // 必需有type字段
  85.       throw new Error(
  86.         'Actions may not have an undefined "type" property. ' +
  87.           'Have you misspelled a constant?'
  88.       )
  89.     }
  91.     // 派发中不能再调用，想了一下，正常情况下不会走到这里，哪怕是多次调用也不会
  92.     // 可能存在的就是是 reducer 里面又调用了dispatch，这样会导致state不是最新的。
  93.     if (isDispatching) {
  94.       throw new Error('Reducers may not dispatch actions.')
  95.     }
  97.     try {
  98.       // 正在派发中。。。
  99.       isDispatching = true
  100.       currentState = currentReducer(currentState, action)
  101.     } finally {
  102.       isDispatching = false
  103.     }
  104.         // 派发结束，执行所有订阅者函数
  105.     const listeners = (currentListeners = nextListeners)
  106.     for (let i = 0; i < listeners.length; i++) {
  107.       const listener = listeners[i]
  108.       listener()
  109.     }
  111.     return action
  112.   }
  114.   // 如果你的应用实现了代码拆分，需要动态加载reducer，需要用到
  115.   function replaceReducer(nextReducer) {
  116.     if (typeof nextReducer !== 'function') {
  117.       throw new Error('Expected the nextReducer to be a function.')
  118.     }
  120.     currentReducer = nextReducer
  121.     dispatch({ type: ActionTypes.REPLACE })
  122.   }
  124.      // 该方法的作用是，订阅store的变化，适用于所有observable的类库。比如 RxJS。
  125.   function observable() {
  126.     const outerSubscribe = subscribe
  127.     return {
  128.       subscribe(observer) {
  129.         if (typeof observer !== 'object' || observer === null) {
  130.           throw new TypeError('Expected the observer to be an object.')
  131.         }
  133.         // // 用于给 subscribe 注册的函数，严格按照 Observable 的规范实现，observer 必须有一个 next 属性。
  134.         function observeState() {
  135.           if (observer.next) {
  136.             observer.next(getState())
  137.           }
  138.         }
  140.         observeState()
  141.         const unsubscribe = outerSubscribe(observeState)
  142.         return { unsubscribe }
  143.       },
  145.       // $$observable 即为 Symbol.observable，也属于 Observable 的规范，返回自身。
  146.       [$$observable]() {
  147.         return this
  148.       }
  149.     }
  150.   }
  152.   // 初始化时执行一个 INIT 类型的action
  153.   dispatch({ type: ActionTypes.INIT })
  156.   return {
  157.     dispatch,
  158.     subscribe,
  159.     getState,
  160.     replaceReducer,
  161.     [$$observable]: observable
  162.   }
  163. }

总结

createStore方法返回一个对象，里面包含了一些常用的 API。

  1. dispatch 派发任务
  2. subscribe 实现了观察者模式，每次dispatch后都会遍历一遍currentListeners
  3. getState 返回当前的 state
  4. replaceReducer 代码拆分时动态加载reducer