根据订阅发布设计模式看了要模仿的一个功能，看着看着坑越挖越多，涉及到了redux 。顺便尝试吃了一下 redux 的几个核心函数的源码，初生涩隐有启发并作记录。

Redux 的几个核心函数源码

combineReducers

function combineReducers(reducers) {
    const reducerKeys = Object.keys(reducers);
    const finalReducers = {};
    for (let i = 0; i < reducerKeys.length; i++) {
        const key = reducerKeys[i];
        if (process.env.NODE_ENV !== 'production') {
            if (typeof reducers[key] === 'undefined') {
                warning('No reducer provided for key'
                    $ {
                        key
                    });
            }
        }
        if (typeof reducers[key] === 'function') {
            finalReducers[key] = reducers[key]
        }
    }
    const finalReducerKeys = Object.keys(finalReducers);
    let unexpectedKeyCache;
    if (process.env.NODE_ENV !== 'production') {
        unexpectedKeyCache = {};
    }
    let shapeAssertionError;
    try {
        // 判断传入的 reducer 格式是否正确，函数作用为传入的 type 不存在时，是否会返回默认值
        assertReducerShape(finalReducers)
    } catch (e) {
        shapeAssertionError = e;
    }
    return function combination(state = {}, action) {
        // 如果存在不返回默认值的 reducer,抛出异常
        if (shapeAssertionError) {
            throw shapeAssertionError
        }
        // 发出警告 不影响程序执行
        if (process.env.NODE_ENV !== 'production') {
            const warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);
            if (warningMessage) {
                warning(warningMessage)
            }
        }
        // 记录是否发生了变化，重点
        let hasChanged = false;
        // 要返回的下一个状态
        const nextState = {};
        for (let i = 0; i < finalReducers.length; i++) {
            const key = finalReducerKeys[i];
            const reducer = finalReducers[key];
            // 使用该函数的要求，每个 reducer 的 key 值要和当前操作的 state 的参数同名，比如传入的 card:cardReducer,那么 state 操作的参数就必须是 state.card
            const previousStateForKey = state[key];
            const nextStateForKey = reducer(previousStateForKey, action);
            if (typeof nextStateForKey === 'undefined') {
                const errorMessage = getUndefinedStateErrorMessage(key, action);
                throw new Error(errorMessage);
            }
            // 执行了 reducer 之后的结果
            nextState[key] = nextStateForKey;
            // 每次执行之后的结果，再综合上一次得到的 hasChanged,得到最终的 state 是否发生了变化
            hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
        }
        // 如果发生了变化，就要返回新的 state -> nextState
        return hasChanged ? nextState : state;
    }
}

bindActionCreators

function bindActionCreator(actionCreator, dispatch) {
    return (...args) => dispatch(actionCreator(..args));
}

function bindActionCreators(actionCreators, dispatch) {
    // 可以只传入一个函数作为参数，它会给这个函数的返回结果添加 dispatch 处理
    if (typeof actionCreators === 'function') {
        return bindActionCreator(actionCreators, dispatch);
    }
    if (typeof actionCreators !== 'object' || actionCreators === null) {
        throw new Error(
            `bindActionCreators expected an object or a function,instead received ${actionCreators === null ? 'null' : typeof actionCreators}` +
            `Did you write 'import ActionCreators from' instead of 'immport * as ActionCreators from'?`);
    }
    const keys = Object.keys(actionCreators);
    const boundActionCreators = {};
    for (let i = 0; i < keys.length++; i++) {
        const key = keys[i];
        const actionCreator = actionCreator[key];
        if (typeof actionCreator === 'function') {
            boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);
        }
    }
    // 为其添加 dispatch 并返回
    return boundActionCreators;
}

compose

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))
  );
}

applyMiddleware

function applyMiddleware(...middlewares) {
  return createStore => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer);
    let dispatch = store.dispatch;
    // 定义一个存储中间件函数的列表
    let chain = [];
    const middlewareAPI = {
      getState: store.getState,
      dispatch: action => dispatch(action)
    };
    // 这里看出 middleware 需要符合一个规则，接受 getState() 和 dispatch 作为参数
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);
    return {
      ...store, // 原来的 store 结构
      dispatch // 增强过的
    };
  };
}

createStore(重点)

图解

function createStore(reducer, preloadedState, enhancer) {
  // 这里操作表明，可以不传第二个参数，不传默认为 undefined
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState;
    preloadedState = undefined;
  }
  if (typeof enhancer !== 'undefined') {
    // enhancer 必须是一个函数
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function');
    }
    // 如果传递 enhancer,则把 createStore 作为参数传递进去，第三个参数不穿也可以，applymiddleware 中会将 createStore 执行并返回
    return enhancer(createStore)(reducer, preloadedState);
  }
  if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function');
  }

  let currentReducer = reducer;
  // 当前的state
  let currentState = preloadedState;
  // 当前的listeners
  let currentListeners = [];
  let nextListeners = currentListeners;
  // 是否在分发
  let isDispatching = false;

  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice(); // 浅拷贝
    }
  }

  function getState() {
    return currentState;
  }

  function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function');
    }
    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);
    };
  }

  function dispatch(action) {
    // action 必须是一个对象{type:'xxx'}
    if (!isPlainObject(action)) {
      throw new Error('Actions must be plain object,Use custom middleware for async actions');
    }
    // 对象必须有 type 属性（唯一确定一个 action，不能重复）
    if (typeof action.type === 'undefined') {
      throw new Error('Actions may not have an undefined "type" property.Have you misspelled a constant');
    }
    // 不能同时执行两个 dispatch
    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions');
    }
    try {
      isDispatching = true;
      //不论第一次传入currentState是否有值，都会根据第一次的reducer返回默认值
      //比如首次执行createStore就会传入一个几乎不会存在于reducer的case中的类型，这样就可以返回第一次传入reducer的默认值了。
      currentState = currentReducer(currentState, action);
    } finally {
      //放开dispatch入口
      isDispatching = false;
    }
    const listeners = (currentListeners = nextListeners);
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i];
      listener();
    }
    return action;
  }

  function replaceReducer(nextReducer) {
    if (typeof nextReducer !== 'function') {
      throw new Error('Expected the nextReducer to be a function');
    }
    currentReducer = nextReducer;
    dispatch({
      type: ActionTypes.INIT
    });
  }
  // 一个正规的 reducer 都会返回一个默认值，执行这一步 是为了返回 reducer 的默认值
  dispatch({
    type: ActionTypes.INIT
  });
  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer
  };
}