redux源码分析:dispatch

redux 在调用 dispatch 具体是做了什么
更新于: 2021-12-19 12:57:28

dispatch 的定义

  • action in, action out.
  • 调用  reducer,获取最新的 state
  • 获取  subscribelisterners,执行对应的 listener,即 render 方法
function dispatch(action) {
  // 无情的省略号...
  currentState = reducer(currentState, action);
  const listeners = (currentListeners = nextListeners);
  // 无情的省略号...
  for (let i = 0; i < listeners.length; i++) {
    const listener = listeners[i];
    listener();
  }

  return action;
}

代码有2点值得讨论:

  1. 这里为什么需要这样操作:const listeners = (currentListeners = nextListeners);
    1. 看到作者的回复:Because it's possible for unsubscribe() to be called in the middle of another operation.
    2. 我的结论是:多个地方操作 listeners
  2. for 循环为什么不用 forEach
    1. 这里的 listeners 是很明确的操作(一般会是密集数组)
    2. js 的 for在操作密集数组,性能优于  forEach

参考

https://github.com/reduxjs/redux/issues/3469

https://knightyun.github.io/2019/08/02/js-sparse-array