Redux介绍及源码解析

const todoAdded = {
  type: 'todos/todoAdded', // action类型, 用于确定是否执行当前action
  payload: 'Buy milk' // 所需要传递的自定义参数
};
dispatch(todoAdded);

const addTodo = (text) => {
  ...
  return {
    type : "ADD_TODO",
    text
  }
};
dispatch(addTodo('test'));

const reducer = (state = initialState, action) => {
  // reducer 通常会根据 action type 字段来决定发生什么
  switch (action.type) {
    // 根据不同 type 的 action 在这里做一些事情
    default:
      // 如果这个 reducer 不关心这个 action type，会返回原本的state
      return state
  }
};

const rootReducer = combineReducers({
  // 定义一个名为`todos`的顶级状态字段，由`todosReducer`处理
  todos: todosReducer,
  filters: filtersReducer
});

const store = createStore(rootReducer);
store.getState();  // 获取当前 state;
store.dispatch(action);  // 触发状态更新;
store.subscribe(listener); // 注册监听回调

export {
  createStore, // 整体的Store创建函数, 不过现在推荐使用redux-toolkit
  legacy_createStore, // 跟createStore一样
  combineReducers, // 不同reducer的组合函数
  bindActionCreators, // 直接绑定action creator, 使调用更简单
  applyMiddleware, // 中间件引入
  compose, // 生成链式调用的middleware
  __DO_NOT_USE__ActionTypes, // 内置的action type
}

const ActionTypes = {
  INIT: `@@redux/INIT${randomString()}`, // 初始化, 当调用createStore时会触发一次
  REPLACE: `@@redux/REPLACE${randomString()}`, // 替换, 当使用者动态更新reducer的时候会调用一次
  PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`,
}

/** 
 * @param {Function} reducer, 形如(state,action) => newState的函数
 * @param {any} preloadedState, 可选参数, 用于初始化的state
 * @param {Function} enhancer, 可选参数, 用于功能增强, 扩展第三方功能, 如miidleware等
 * @returns {Store} 返回store对象用于状态处理
 */
createStore(reducer, preloadedState, enhancer) {
  ...
  let currentReducer = reducer // 初始化reducer
  let currentState = preloadedState // 初始化当前状态
  let currentListeners = [] // 初始化订阅列表
  let nextListeners = currentListeners // 对订阅列表做备份
  let isDispatching = false // 初始化dispatch执行状态
  ...
  dispatch({ type: ActionTypes.INIT }) // 触发一下初始化类型的action, 使用者可以在reducer中响应该事件
  return {
    dispatch, // 用于触发action
    subscribe, // 通过listener函数订阅state的变化
    getState, // 直接返回当前state
    replaceReducer, // 替换当前正在使用的reducer函数
    [$$observable]: observable,
  }
}

function dispatch(action) {
    ...
    try {
      isDispatching = true // 上锁, 表示当前正在执行reducer
      currentState = currentReducer(currentState, action) // 执行reducer, 更新当前状态
    } finally {
      isDispatching = false // 解锁, 表示已经执行完reducer
    }
    // 更新当前的订阅数组, 并轮训监听函数, 告诉订阅者当前状态已更新
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }
    // 返回输入的action对象
    return action
  }

function subscribe(listener) {
    ...
    let isSubscribed = true // 采用闭包的方式缓存已订阅状态
    ensureCanMutateNextListeners() // 拷贝当前订阅列表
    nextListeners.push(listener) // 向拷贝到列表中添加新的监听器
    // 返回解除订阅函数
    return function unsubscribe() {
      ...
      isSubscribed = false // 恢复未订阅状态
      ensureCanMutateNextListeners() // 拷贝当前订阅列表
      const index = nextListeners.indexOf(listener) // 删除监听器
      nextListeners.splice(index, 1)
      currentListeners = null // 清空当前订阅列表
    }
  }

function replaceReducer(nextReducer) {
    currentReducer = nextReducer // 直接干脆的替换掉
    dispatch({ type: ActionTypes.REPLACE }) // 还记得上面说的__DO_NOT_USE__ActionTypes吗, 这里会触发他的REPLACE事件, 使用者可以在reducer里响应该事件
  }

function observable() {
    const outerSubscribe = subscribe // 对subscribe函数的引用
    return {
      // observer是个对象, 必须包含next函数
      subscribe(observer) {
        ...
        function observeState() {
          if (observer.next) {
            observer.next(getState())
          }
        }
        
        observeState() // 先更获取一下当前状态
        const unsubscribe = outerSubscribe(observeState) // 注册监听器 
        return { unsubscribe } // 返回解除订阅函数
      },
      ...
    }
  }

export default function combineReducers(reducers) {
  const reducerKeys = Object.keys(reducers) // 获取对象key值列表
  const finalReducers = {} // 缓存符合要求的reducer
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]
    ...
    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key] // reducer只能是函数
    }
  }
  const finalReducerKeys = Object.keys(finalReducers)
  ...
  let shapeAssertionError
  try {
    assertReducerShape(finalReducers) // reducer拦截内置的action type
  } catch (e) {
    shapeAssertionError = e
  }
  // 返回reducers的组合函数, 用于传递给createStore
  return function combination(state = {}, action) {
    ...
  }
}

function combination(state = {}, action) {
    ...
    let hasChanged = false // 状态变化标识位
    const nextState = {} // 已更新的状态
    // 循环执行 reducers 中的 reducer 函数
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key] // 找到待执行的reducer
      const previousStateForKey = state[key] // 找到对应的state
      const nextStateForKey = reducer(previousStateForKey, action)
      ...
      nextState[key] = nextStateForKey // 更新对应的state值
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey // 判断状态是否改变, 只要有一个reducer关联的状态改变就算有变化
    }
    hasChanged =
      hasChanged || finalReducerKeys.length !== Object.keys(state).length // 如果有状态的删减, 也算变化
    return hasChanged ? nextState : state // 返回新的状态
  }

const state = {
    counter: {},
    todos: {}
}
const reducers = {
    counter: (state, action) => newState,
    todos: (state, action) => newState
}

const addTodo = (text) => ({ type: 'ADD_TODO', text });
dispatch(addTodo('Use Redux'));

// 对于每个actionCreator方法，返回一个自动执行dispatch的方法, 简化调用
function bindActionCreator(actionCreator, dispatch) {
  return function () {
    return dispatch(actionCreator.apply(this, arguments))
  }
}
// 根据不同的actionCreators输入类型, 返回对应的bindActionCreator函数
export default function bindActionCreators(actionCreators, dispatch) {
  // 如果是函数, 直接返回bindActionCreator的封装函数
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }
  ...
  const boundActionCreators = {}
  // 如果是对象, 则遍历对象, 返回包含bindActionCreator函数执行结果的对象
  for (const key in actionCreators) {
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

const addTodoCreator = bindActionCreators(addTodo, dispatch)
addTodoCreator('Use Redux') // 这里会自动执行dispatch

export function createStore(reducer, preloadedState, enhancer) {
  ...
  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error(...)
    }
    // 首先判断enhancer是否存在, 存在的话则直接交给enhancer处理, 不走后续逻辑
    return enhancer(createStore)(reducer, preloadedState)
  }
  ...
}

function middleware({ getState, dispatch }) {
  return next => action => {
    // 调用 middleware 链中下一个 middleware 的 dispatch。
    const returnValue = next(action)
    // 一般会是 action 本身，除非后面的 middleware 修改了它。
    return returnValue
  }
}

export default function applyMiddleware(...middlewares) {
  // 这里的args其实就是createStore的三个入参数, 在这里拦截createStore, 对其进行了逻辑增强
  return (createStore) => (...args) => {
    const store = createStore(...args) // 先生成默认的store
    let dispatch = () => { ... }
    // 使用默认的store构造middleware函数的入参
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args),
    }
    // 生成链式调用列表, 即形如next => action => {}的函数列表
    const chain = middlewares.map((middleware) => middleware(middlewareAPI))
    // 构造新的dispatch, 链式调用middleware, chain列表按从右到左组合
    dispatch = compose(...chain)(store.dispatch)
    // 返回新的store，并将新的dispatch方法覆盖原有的dispatch方法
    return {
      ...store,
      dispatch,
    }
  }
}