redux 原理解析

一、三大原则

可以说redux的核心设计理念，都是基于单一数据源、state 状态只读、使用纯函数来修改 state的三大原则，所以在分析redux的原理前，需要先理解这三大原则，以及相互之间的关系。

1. 单一数据源

整个应用的 state 会存储在单一的 store的 Object Tree 中

该设计是由 Flux 架构而来，在 Flux 架构中是允许多个 store 的结构，Redux 简化为只有单一个
整个应用存储在一个 Object Tree 上，可能会导致数据对象过于庞大的问题，Redux 提供了 combineReducers可以合并多个 reducer, 因此，Store 可以通过拆分多个 reducer 来避免数据源对象过于庞大的问题
Redux 的单一个 store 的设计有一些好处，对开发者来说，它可以容易调试与观察状态的变化，状态存储于对象树状结构中，也很容易做到重做/复原的功能

2. state 是只读的

唯一修改 state 的方法就是触发action

不能直接修改 store 所记录的状态值，只能"间接"地通过 store.dispatch(action)发出，再经过 reducer 处理返回新的 state（没有直接修改应用状态），从而实现更动 state 的目的
state 只读也是借鉴了 Flux 的单向数据流的原则，这样设计的好处是数据更容易追踪，问题容易定位

3. 使用纯函数来修改 state

通过定义 reducer 来确定状态的修改，而每一个 reducer 都是纯函数

借鉴了函数式编程，Redux 通过纯函数 reducer 来修改状态，由 reducer 所产生的新状态，并不是直接修改之前的状态而来，而是一个复制之前状态，然后加上动作改变的部份，产生的一个新的对象
reducer修改状态，可以简化理解为之前的状态 + 动作 = 新的状态，公式如下：

(previousState, action) => newState

纯函数的好处是没有副作用，相同的输入，永远都会有相同的输出。这样做的好处是这个函数可以不依赖外部环境，更加解耦，更容易调试以及更容易的写单元测试。

二、Action

action 是一个描述"发生了什么事"的纯对象

三、Reducer

四、Store

Redux 提供的 createStore 方法会根据 reducer 生成 store。应用中有且只有一个 store

createStore.js

1. getState

获取整个应用中store管理的 state

function getState() {
  // 如果reducer正在执行，报错
  if (isDispatching) {
    throw new Error(
      'You may not call store.getState() while the reducer is executing. ' +
        'The reducer has already received the state as an argument. ' +
        'Pass it down from the top reducer instead of reading it from the store.'
    );
  }

  // 返回整个应用中 store 管理的 state
  return currentState;
}

2. dispatch

通过reducer根据 action 触发状态更新

函数流程图：

dispatch流程图

源代码：

function dispatch(action) {
  // 判断参数action是否是纯对象，不是报错
  if (!isPlainObject(action)) {
    throw new Error(
      'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
    );
  }

  // 判断action.type 是否存在，不是报错
  if (typeof action.type === 'undefined') {
    throw new Error(
      'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
    );
  }

  // 如果reducer正在执行，报错
  if (isDispatching) {
    throw new Error('Reducers may not dispatch actions.');
  }

  try {
    // 设置isDispatching为true，防止后续的action进来触发reducer操作
    isDispatching = true;
    // 根据action触发状态更新
    currentState = currentReducer(currentState, action);
  } finally {
    isDispatching = false;
  }

  // 当前状态设置完毕后，执行监听函数
  const listeners = (currentListeners = nextListeners);
  for (let i = 0; i < listeners.length; i++) {
    const listener = listeners[I];
    listener();
  }

  // 返回参数
  return action;
}

3. subscribe

绑定监听函数，reducer 执行完后执行该函数

function subscribe(listener) {
  // 如果参数 listener 不是function，则报错
  if (typeof listener !== 'function') {
    throw new Error('Expected the listener to be a function.');
  }

  // 如果reducer正在执行，报错
  if (isDispatching) {
    throw new Error(
      'You may not call store.subscribe() while the reducer is executing. ' +
        'If you would like to be notified after the store has been updated, subscribe from a ' +
        'component and invoke store.getState() in the callback to access the latest state. ' +
        'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'
    );
  }

  let isSubscribed = true;

  // 保存一份快照
  ensureCanMutateNextListeners();
  // 添加一个订阅函数
  nextListeners.push(listener);

  // 返回一个取消订阅的函数
  return function unsubscribe() {
    if (!isSubscribed) {
      return;
    }

    // 如果reducer正在执行，报错
    if (isDispatching) {
      throw new Error(
        'You may not unsubscribe from a store listener while the reducer is executing. ' +
          'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'
      );
    }

    isSubscribed = false;

    // 保存一份快照
    ensureCanMutateNextListeners();
    // 找到当前的 listener 的位置并删除它
    const index = nextListeners.indexOf(listener);
    nextListeners.splice(index, 1);
  };
}

4. replaceReducer

替换reducer，且初始化 state

function replaceReducer(nextReducer) {
  // 如果参数 nextReducer 不是纯函数，则报错
  if (typeof nextReducer !== 'function') {
    throw new Error('Expected the nextReducer to be a function.');
  }

  // 替换 Reducer
  currentReducer = nextReducer;

  // This action has a similiar effect to ActionTypes.INIT.
  // Any reducers that existed in both the new and old rootReducer
  // will receive the previous state. This effectively populates
  // the new state tree with any relevant data from the old one.
  dispatch({ type: ActionTypes.REPLACE });
}

5. observable

function observable() {
  const outerSubscribe = subscribe;
  return {
    subscribe(observer) {
      // 如果参数 observer 不是一个对象，则报错
      if (typeof observer !== 'object' || observer === null) {
        throw new TypeError('Expected the observer to be an object.');
      }

      function observeState() {
        if (observer.next) {
          observer.next(getState());
        }
      }

      observeState();
      const unsubscribe = outerSubscribe(observeState);
      return { unsubscribe };
    },

    [$$observable]() {
      return this;
    },
  };
}

五、数据流

严格的单向数据流是 Redux 架构的设计核心

Redux 应用中数据的生命周期遵循下面 4 个步骤：

Redux 应用中数据的生命周期