深入Flux

{
    type: TodoActionTypes.ADD_TODO, // action 的类型, 用于 disatcher 触发时的执行筛选
    text: '', // 需要更新的 state 值
}

const Actions = {
  // 单个creator, 执行 dispatch 事件
  addTodo(text) {
    TodoDispatcher.dispatch({
      type: TodoActionTypes.ADD_TODO,
      text,
    });
  },
}

import { Dispatcher } from 'flux';
export default new Dispatcher();

register(callback: (payload: TPayload) => void): DispatchToken {
    var id = _prefix + this._lastID++; // 唯一标识id
    this._callbacks[id] = callback; // 向注册表中添加回调函数
    return id; // 返回标识
}

dispatch(payload: TPayload): void {
    this._startDispatching(payload); // 清理状态
    try {
      for (var id in this._callbacks) {
        if (this._isPending[id]) { // 执行标识位置位
          continue;
        }
        this._invokeCallback(id); // 执行注册表中回调函数
      }
    } finally {
      this._stopDispatching(); // 恢复状态
    }
}

// 传入DispatchToken数组, DispatchToken在register时生成
waitFor(ids: Array<DispatchToken>): void { 
    for (var ii = 0; ii < ids.length; ii++) {
      var id = ids[ii];
      if (this._isPending[id]) { // 等待ids中的回调执行完毕
         continue;
      }
      this._invokeCallback(id); // 执行当前的回调函数
    }
}

class FluxStore {
  ...
  constructor(dispatcher: Dispatcher<any>): void {
    this.__changeEvent = 'change'; // 定义状态变更事件名
    this.__dispatcher = dispatcher; // 初始化dispatcher
    this.__emitter = new EventEmitter(); // 初始化事件发生器
    this._dispatchToken = dispatcher.register((payload) => {
      this.__invokeOnDispatch(payload);
    }); // 向dispatch注册表中注册回调函数
  }
}

// state: 当前状态, action: Action触发的payload
reduce(state: number, action: Object): number {
  switch(action.type) { // 根据触发的类型, 选择性的更新state
    case: 'add':
      return state + action.value;
    case: 'double':
      return state * 2;
    default:
      return state;
  }
}

addListener(callback: (eventType?: string) => void): {remove: () => void} {
    // 当状态改变时, 会触发chagne事件
    return this.__emitter.addListener(this.__changeEvent, callback);
}

__invokeOnDispatch(action: Object): void {
    this.__changed = false; // 清除更新状态
    const startingState = this._state; // 缓存当前state
    // 获取更新后的state
    const endingState = this.reduce(startingState, action); 
    // 如果更新前后state的值不一样
    if (!this.areEqual(startingState, endingState)) {
      this._state = endingState; // 将当前state更新到最新值
      this.__emitChange(); // 将this.__changed置为true
    }

    if (this.__changed) {
      // 触发'change'事件, 通知组件有状态更新
      this.__emitter.emit(this.__changeEvent);
    }
}

function create<DefaultProps, Props, State>(
  Base: ReactClass<Props>, // React类组件
  options?: ?Options, // 可选项
): ReactClass<Props>

class FooContainer extends Component {
  static getStores(props) {
    return [FooStore];
  }

  static calculateState(prevState, props) {
    return {
      foo: FooStore.getState(),
    };
  }

  render() {
    return <FooView {...this.state} />;
  }
}
module.exports = FluxContainer.create(FooContainer);

const DEFAULT_OPTIONS = {
  pure: true, // 是否是纯组件
  withProps: false, // 是否依赖于当前的props
  withContext: false, // 是否依赖于上下文
};

class FluxContainerSubscriptions {
  ...
  setStores(stores: Array<FluxStore>): void {
    ...
    // 创建Store的change事件监听函数, 并逐个注入Store中, 当有一个Store状态发证变化, 则属性changed置为true
    const setChanged = () => { changed = true; };
    this._tokens = stores.map((store) => store.addListener(setChanged));
    ...
    // 向FluxStoreGroup中注册回调函数, 当所有的Dispatcher注册表中所有的函数执行完后, 触发此回调
    const callCallbacks = () => {
      if (changed) {
        this._callbacks.forEach((fn) => fn());
        changed = false;
      }
    };
    this._storeGroup = new FluxStoreGroup(stores, callCallbacks);
  }
  // 添加监听函数, 订阅Stores状态的变化
  addListener(fn: () => void): void {
    this._callbacks.push(fn);
  }
  ...
}

class ContainerClass extends Base {
    ...
    constructor(props: Props, context: any) {
      ...
      this._fluxContainerSubscriptions = new FluxContainerSubscriptions();
      // 初始化当前Stores, 并监听Stores变化
    this._fluxContainerSubscriptions.setStores(getStores(props, context));
      // 向订阅列表中添加视图更新回调
      this._fluxContainerSubscriptions.addListener(() => {
        this.setState((prevState, currentProps) =>
          getState(prevState, currentProps, context),
        );
      });
      ...
    }
    ...
}