const Actions = {
  addTodo(text) {
    TodoDispatcher.dispatch({
      type: TodoActionTypes.ADD_TODO,
      text,
    });
  }
}

var invariant = require('invariant');

export type DispatchToken = string;

var _prefix = 'ID_';

class Dispatcher<TPayload> {
  _callbacks: {[key: DispatchToken]: (payload: TPayload) => void};
  _isDispatching: boolean;
  _isHandled: {[key: DispatchToken]: boolean};
  _isPending: {[key: DispatchToken]: boolean};
  _lastID: number;
  _pendingPayload: TPayload;

  constructor() {
    this._callbacks = {};
    this._isDispatching = false;
    this._isHandled = {};
    this._isPending = {};
    this._lastID = 1;
  }

  /**
   * 注册一个可以被分发的函数，返回一个回调ID，这个ID可以被waitfor函数使用，这个注册函数默认未处理未完成
   * 往实例变量_callbacks添加key-value
   */
  register(callback: (payload: TPayload) => void): DispatchToken {
    var id = _prefix + this._lastID++;
    this._callbacks[id] = callback;
    return id;
  }

  /**
   * 根据回调ID删除注册函数
   * 删除_callbacks中的key
   */
  unregister(id: DispatchToken): void {
    invariant(
      this._callbacks[id],
      'Dispatcher.unregister(...): `%s` does not map to a registered callback.',
      id
    );
    delete this._callbacks[id];
  }

  /**
   * 在执行当前回调之前等待指定执行的回调完成
   * 执行所有非isPending状态的回调函数
   */
  waitFor(ids: Array<DispatchToken>): void {
    invariant(
      this._isDispatching,
      'Dispatcher.waitFor(...): Must be invoked while dispatching.'
    );
    for (var ii = 0; ii < ids.length; ii++) {
      var id = ids[ii];
      if (this._isPending[id]) {
        invariant(
          this._isHandled[id],
          'Dispatcher.waitFor(...): Circular dependency detected while ' +
          'waiting for `%s`.',
          id
        );
        continue;
      }
      invariant(
        this._callbacks[id],
        'Dispatcher.waitFor(...): `%s` does not map to a registered callback.',
        id
      );
      this._invokeCallback(id);
    }
  }

  /**
   * 转发参数给所有注册的回调函数，不允许转发中心在转发状态下进行转发
   */
  dispatch(payload: TPayload): void {
    invariant(
      !this._isDispatching,
      'Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.'
    );
    this._startDispatching(payload);
    try {
      for (var id in this._callbacks) {
        if (this._isPending[id]) {
          continue;
        }
        this._invokeCallback(id);
      }
    } finally {
      this._stopDispatching();
    }
  }

  /**
   * 转发中心是否处于转发状态
   */
  isDispatching(): boolean {
    return this._isDispatching;
  }

  /**
   * 根据回调函数的ID和使用参数pendingPayload去调用函数
   * 同时改变回调函数的状态 isPending=true
   * 运行后，修改该回调的运行状态 isHandled=true
   */
  _invokeCallback(id: DispatchToken): void {
    this._isPending[id] = true;
    this._callbacks[id](this._pendingPayload);
    this._isHandled[id] = true;
  }

  /**
   * 开始分发的时候将所有注册回调的pending状态和handle状态清空，即是设置为false
   * 然后赋值转发回调函数需要的参数pendingPayload
   * 并改变转发状态isDispatching=true
   */
  _startDispatching(payload: TPayload): void {
    for (var id in this._callbacks) {
      this._isPending[id] = false;
      this._isHandled[id] = false;
    }
    this._pendingPayload = payload;
    this._isDispatching = true;
  }

  /**
   * 清空转发状态的标记
   * 删除_pendingPayload和设置isDispatching=false
   */
  _stopDispatching(): void {
    delete this._pendingPayload;
    this._isDispatching = false;
  }
}

module.exports = Dispatcher;

import type Dispatcher from 'Dispatcher';

const {EventEmitter} = require('fbemitter');

// 这个类是内部基类，不直接继承
class FluxStore {
    // 私有
    _dispatchToken: string;
    // 保护属性，可以子类去使用
    __changed: boolean;
    __changeEvent: string;
    __className: any;
    __dispatcher: Dispatcher<any>;
    __emitter: EventEmitter;
    
    // 对象初始化
    constructor(dispatcher: Dispatcher<any>): void {
        this.__className = this.constructor.name;
        this.__changed = false;
        this.__changeEvent = 'change';
        this.__dispatcher = dispatcher;
        this.__emitter = new EventEmitter();
        // store 初始化会默认注册一个回调
        this._dispatchToken = dispatcher.register((payload) => {
          this.__invokeOnDispatch(payload);
        });
    }
    
    // 添加监听
    addListener(callback: (eventType?: string) => void): {remove: () => void}
    
    // 获取转发中心
    getDispatcher(): Dispatcher<any>
    
    // 获取转发中心注册回调的ID，也就是每个store注册的回调
    getDispatchToken(): string
    
    // 最近的调度中，store是否发生改变
    hasChanged(): boolean
    
    // 触发store改变后，修改__changed属性为true
    __emitChange(): void
    
    // 继承该类的类需要重写该方案，否则__onDispatch会抛出错误
    // 封装了所有__onDispatch的逻辑，该函数在store的注册回调中被调用
    __invokeOnDispatch(payload: Object): void
    
    // 这个回调会在实例化期间被Dispatcher注册
    __onDispatch(payload: Object): void
}

class FluxReduceStore<TState> extends FluxStore {
    // 私有
    _state: TState;

    constructor(dispatcher: Dispatcher<Object>) {
        super(dispatcher);
        this._state = this.getInitialState();
    }
    
    // 如果store不是Immutable类型，这个方法是要重写的
    // 返回_state
    getState(): TState
    
    // 需要重写
    // 初始化_state的具体函数
    getInitialState(): TState
    
    // 需要重写
    // 根据动作状态描述，返回新的状态
    reduce(state: TState, action: Object): TState
    
    // 如果Tstate是Immutable类型的话不需要重写
    // 比较前后state是否相同
    areEqual(one: TState, two: TState): boolean
    
    // 重写FluxStore的__invokeOnDispatch
    __invokeOnDispatch(action: Object): void
}

// 检测所有的store初始化dispatcher对象为同一个对象
function _getUniformDispatcher(stores: Array<FluxStore>): Dispatcher<any>

/**
 * 初始化接受两个参数
 * FluxStore[], callback
 */
class FluxStoreGroup {
    // 私有
    _dispatcher: Dispatcher<any>;
    _dispatchToken: DispatchToken;
    
    constructor(stores: Array<FluxStore>, callback: Function): void {
        this._dispatcher = _getUniformDispatcher(stores);
    
        // Precompute store tokens.
        var storeTokens = stores.map(store => store.getDispatchToken());
    
        // Register with the dispatcher.
        this._dispatchToken = this._dispatcher.register(payload => {
          this._dispatcher.waitFor(storeTokens);
          callback();
        });
    }

    // 取消回调的注册
    release(): void
}

function create<DefaultProps, Props, State>(
    Base: ReactClass<Props>,
    options?: ?Options
): ReactClass<Props>

function createFunctional<Props, State, A, B>(
    viewFn: (props: State) => React.Element<State>,
    getStores: (props?: ?Props, context?: any) => Array<FluxStore>,
    calculateState: (
        prevState?: ?State,
        props?: ?Props,
        context?: any
    ) => State,
    options?: Options
): ReactClass<Props>

const authReducer = (state = initState, action) => {}
const bindCardReducer = (state = initState, action) => {}

const appReducer = combineReducer({ authReducer, bindCardReducer })

export default function combineReducers(reducers) {
  // 筛选符合的reducer，reducer为function
  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 {
    // 遍历finalReducers中的reducer，检查传入reducer的state是否合法
    assertReducerShape(finalReducers)
  } catch (e) {
    shapeAssertionError = e
  }

  return function combination(state = {}, action) {
    // 传入的reducer的state如果不合法，就抛出错误
    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 = {}
    // 遍历所有的key和reducer，分别将reducer对应的key所代表的state，代入到reducer中进行函数调用
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key]
      // combineReducers黑魔法--要求传入的Object参数中，reducer function的名称和要和state同名的原因
      const previousStateForKey = state[key]
      const nextStateForKey = reducer(previousStateForKey, action)
      if (typeof nextStateForKey === 'undefined') {
        const errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    return hasChanged ? nextState : state
  }
}
**

/**
 *@param reducer 是一个函数，返回下一个store的的状态
 *@param preloadedState是一个初始态的状态
 *@param enhancer函数 是redux store的中间件
 *@returns store
 */
export default function createStore(reducer, preloadedState, enhancer) {
  // 检测preloadState和enhancer是否传反
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }

  // enhancer中间件
  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }

    return enhancer(createStore)(reducer, preloadedState)
  }

  if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.')
  }

  let currentReducer = reducer
  let currentState = preloadedState
  let currentListeners = []
  let nextListeners = currentListeners
  let isDispatching = false

  // 如果nextListeners和currentListeners指向同一个栈，浅复制一份
  // 目的是修改nextListeners不会影响到currentListeners
  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

  /**
   * 通过方法获取state. 在中间件一般都会用到这个函数来获取state
   */
  function getState() {
    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.'
      )
    }

    return currentState
  }

  /**
   * 注册listener，同时返回一个取消事件注册的方法。当调用store.dispatch的时候调用listener
   * 每次调度动作时都会调用它
   * 而如果状态树的某些部分可能已经发生了变化那么你可以调用getState()来读取回调中的当前状态树
   */
  function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected the listener to be a function.')
    }

    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)

    /*
     * 返回删除该listener的函数
     * 使用:
     * const unsubscribe = store.subscribe(() => { // dosomethin })
     * unsubscribe()
     */
    
    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      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()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }

  /**
   * 分发一个action.这是唯一改变state的方法
   * reducer函数可以被当前状态树和给以的action对象调用以创建状态集合。它的返回值会作为下一个状态数，会被所有listeners监听
   * 基本的实现仅仅支持普通对象的分发，如果你Promise，Observable，thunk或其他东西，那么就要使用中间件去实现了，比如redux-thunk
   */
  function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
          'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
          'Have you misspelled a constant?'
      )
    }
    
    // 防止多个dipatch同时进行
    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }
    
    // 分发的时候，nextListeners作为新的listeners
    const listeners = (currentListeners = nextListeners)
    // 遍历调用listener
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

  /**
   * 替换reducer
   */
  function replaceReducer(nextReducer) {
    if (typeof nextReducer !== 'function') {
      throw new Error('Expected the nextReducer to be a function.')
    }

    currentReducer = nextReducer
    dispatch({ type: ActionTypes.REPLACE })
  }

  // 实例化store的时候初始化分发action
  dispatch({ type: ActionTypes.INIT })

  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer
  }
}

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

import thunkMiddleware from 'redux-thunk'

const store = createStore(reducers, state, applyMiddleware(thunkMiddleware))

let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
  console.log('dispatching', action);
  next(action);
  console.log('next state', store.getState());
}

export default function applyMiddleware(...middlewares) {
  // 最终返回一个以createStore为参数的匿名函数
  // 这个函数返回另一个以reducer, initialState, enhancer为参数的匿名函数
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        `Dispatching while constructing your middleware is not allowed. ` +
          `Other middleware would not be applied to this dispatch.`
      )
    }

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    // 每个 middleware 都以 middlewareAPI 作为参数进行注入，返回一个新的链。
    // 此时的返回值相当于调用 thunkMiddleware 返回的函数： (next) => (action) => {} ，接收一个next作为其参数
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 并将链代入进 compose 组成一个函数的调用链
    // compose(...chain) 返回形如(...args) => f(g(h(...args)))，f/g/h都是chain中的函数对象。
    // 在目前只有 thunkMiddleware 作为 middlewares 参数的情况下，将返回 (next) => (action) => {}
    // 之后以 store.dispatch 作为参数进行注入
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

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

// bindActionCreators期待一个Object作为actionCreators传入，里面是 key: action
export default function bindActionCreators(actionCreators, dispatch) {
  // 如果只是传入一个action，则通过bindActionCreator返回被绑定到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 "import * as ActionCreators from"?`
    )
  }

  // 遍历并通过bindActionCreator分发绑定至dispatch
  var keys = Object.keys(actionCreators)
  var boundActionCreators = {}
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i]
    var actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

let newRate = Object.assign({}, state.list[0].roomInfo.rateList[0])
newRate.score = 90;