一篇带有“思考”的redux源码阅读

const ActionTypes = {
  INIT: `@@redux/INIT${randomString()}`,
  REPLACE: `@@redux/REPLACE${randomString()}`,
  PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`
}

export default function isPlainObject(obj) {
  if (typeof obj !== 'object' || obj === null) return false

  let proto = obj
  while (Object.getPrototypeOf(proto) !== null) {
    proto = Object.getPrototypeOf(proto)
  }

  return Object.getPrototypeOf(obj) === proto
}

export default function warning(message) {
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    console.error(message)
  }
  try {
    throw new Error(message)
  } catch (e) {} // eslint-disable-line no-empty
}

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose,
  __DO_NOT_USE__ActionTypes
}

function isCrushed() {}

// actions.js
const Add = (value) => { type: 'increment', value }

function bindActionCreator(actionCreator, dispatch) {
  // 使用闭包来屏蔽 dispatch 与 actionCreator
  return function() {
    return dispatch(actionCreator.apply(this, arguments))
  }
}
export default function bindActionCreators(actionCreators, dispatch) {
  // 当 actionCreators 只有一个的时候，直接返回该函数的打包结果
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  // 省略参数类型判断
  // ...
  const boundActionCreators = {}
  for (const key in actionCreators) {
    const actionCreator = actionCreators[key]
    // 只对 { key: actionCreator } 中的函数处理；actionCreators 中的其他数据类型被忽略
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

// () => {} 为每个对应的reducer
const state = {
    count: () => {},
    userData: () => {},
    oeherData: () => {}
}

export default function combineReducers(reducers) {
  const reducerKeys = Object.keys(reducers)
  const finalReducers = {}
  // 检查所有reducer的key值是否合法，reducer是一个函数，则加入到finalReducers
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]

    // 这里有个判断，如果reducers对象的某个key值的value为undefined，则报错

    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
  const finalReducerKeys = Object.keys(finalReducers)

  // 这里有个判断(assertReducerShape)，判断是否有 reducer 返回是 undefined
  // 如果有，则先保留这个错误，我们定义为错误 A

  // 这个 combination 函数，每次dispatch都会执行一次
  return function combination(state = {}, action) {
    // 这里有个判断，如果错误A存在，则抛出异常

    // 这里有个判断(getUnexpectedStateShapeWarningMessage)，会对数据进行多重判断，
    // 判断有错，则抛出异常，判断的规则有：
    // 1. reducers的数量是否为0
    // 2. 对每次执行reducer传入的state（state的来源后面讲到）是否是“纯对象”（上面有提到）
    // 3. 对每次执行reducer传入的state对象判断，是否该对象所有的字段都是“自己的”(hasOwnProperty)，
    // 也就是没有一些从父对象继承，toString ?
    // 第三点其实有点不太了解，因为第二步纯对象已经过滤了？

    // 下面这个就是 combineReducers 的核心代码
    let hasChanged = false
    const nextState = {}

    // 遍历所有的函数reducer，获取返回值，通过判断前后值的不同，判断是否发生了变化，有变化，则返回新的state
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key]
      const previousStateForKey = state[key]
      const nextStateForKey = reducer(previousStateForKey, action)

      // 不允许 reducer 返回的值为 undefined，否则报错
      if (typeof nextStateForKey === 'undefined') {
        const errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey
      // 这里判断是否改变，是通过判断 reducer 返回的值与之前的值是否一致
      // 所以就突出了“不可变对象”的重要性
      // 如果reducer每次返回的对象是在旧对象上面更改数据
      // 而对象地址没改变，那么 redux 就认为，这次改变是无效的
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    return hasChanged ? nextState : state
  }
}

export default function createStore(reducer, preloadState, enhancer) {
    // 判断是否传入各种参数是否符合要求
    // 对于增强器（enhancer）的调用会提前返回
    // 创建store的过程被延后到增强器中
    // ...

    // 当前最新的 reducer 与 state
    // listeners 是通过 store实例subscribe的函数数组
    let currentReducer = reducer
    let currentState = preloadedState
    let currentListeners = []
    let nextListeners = currentListeners
    // 当前的reducer是否在执行当中
    let isDispatching = false

    // 用于防止 listeners 数组出错，后面讲到
    function ensureCanMutateNextListeners() {}
    // 返回当前最新的 state，给外部函数调用获取内部数据
    function getState() {
        return currentState
    }

    // store.subscribe的方法，用于添加 listener，后面有详细讲解
    // 监听 state 的变化
    function subscribe(listener) {}

    // 触发 reducer 执行，返回新的 state
    function dispatch(action) {}

    // 使用新的 reducer 替换当前的 currentReducer
    // 通常在两种情况下使用：
    // 1. 部分 reducer 异步加载，加载完毕后添加
    // 2. 用于开发时候用，热更新
    function replaceReducer(nextReducer) {
        currentReducer = nextReducer
    }

    // TODO 这个了解不多
    function observable () {}

    // 触发第一个更新。拿到第一次初始化的 state
    dispatch({ type: ActionTypes.INIT })
}

function dispatch (action) {
    // 判断 action 是否是“纯”函数
    // 判断 action.type 是否存在
    // ...

    // 判断当前的dispatch是否在执行中，多次触发，则报错
    if (isDispatching) { throw new Error() }

    try {
      isDispatching = true
      // 尝试去执行 reducer，把返回的 state 作为最新的 state
      // 如果 我们的 reducer 是使用 combineReducers 方法包裹的话
      // 这里的 currentReducer 为 comineReducer的combination方法
      // 这里回答了之前所说的 combination 方法拿到的第一个参数 state
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    // 更新完 state 之后，就会把监听的函数全都执行一遍
    // 注意这里的 currentListeners 被赋值为 nextListeners
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
}

function reducer(state, action) {
    switch (action.type) {
    case '':
        // ...
        break
    case '':
        // ...
        break
    default:
        return state
    }
}

function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
        nextListeners = currentListeners.slice()
    }
}

function subscribe(listener) {
    // 省略部分参数与进程判断
    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
        if (!isSubscribed) {
            return
        }

        // 省略部分进程可行性判断

        isSubscribed = false

        ensureCanMutateNextListeners()
        const index = nextListeners.indexOf(listener)
        nextListeners.splice(index, 1)
    }
}

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

(...args) => f(g(h(...args)))

// 等同于 
compose(f, g, h)(...args)

// compose使用例子
function foo (str) {
    return str + '_foo'
}
function bar (str) {
    return str + '_bar'
}
function baz (str) {
    return str + '_baz'
}
compose(baz, bar, foo)('base') // "base_foo_bar_baz"

const store = createStore(rootReducer, {}, applyMiddleware(middleware1, middleware2))

// applyMiddleware 源码
export default function applyMiddleware(...middlewares) {
    // createStore方法作为参数传入
    // 相当于延迟一步初始化 store
    return createStore => (...args) => {
        const store = createStore(...args)
        let dispatch = () => {/* ... */}

        const middlewareAPI = {
            getState: store.getState,
            dispatch: (...args) => dispatch(...args)
        }

        // 把传入的 middleware 先执行了一遍
        // 把 getState 与 dispatch 方法传入
        // 让 middleware 能够获取到当前 store 的 state与有触发新的 dispatch 能力
        const chain = middlewares.map(middleware => middleware(middlewareAPI))

        // 这个时候的 dispatch 不是原有的 createStore 函数中的方法
        // 而是一个经过 middleware 集成的新方法
        // 而原有的 dispatch 方法作为参数，传入到不同的middleware
        dispatch = compose(...chain)(store.dispatch)

        return {
            ...store,
            // 使用当前的 dispatch 覆盖 createStore 的 dispatch 方法
            dispatch
        }
  }
}

function customeMiddleware({ dispatch, getState }) {
    return next => {
        return action => {
            if (typeof action === 'function') {
                return action(dispatch, getState)
            }

            return next(action)
        }
    }
}

function customeMiddleware ({dispatch, getState}) {
    // ...
}

const chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)

// chain0 表示 chain 数组中的第一个函数，chain1表示第二个，以此类推
// compose 执行顺序为倒序
const action2 = chain2(store.dispatch) // store.dispatch的值是compose()(store.dispatch)传入的
const action1 = chain1(action2)
const action0 = chain0(action1)

// action0
action0(action)
const result = next(action) // 这个 next 的函数为 action1
    // action1
    action1(action)
    const result = next(action) // 这个 next 的函数为action2
        // action2
        action2(action)
        const result = next(action) // 这个 next 的函数为 store.dispatch