美文网首页
Redux源码阅读_1(下)

Redux源码阅读_1(下)

作者: 晴窗细语 | 来源:发表于2020-08-07 16:26 被阅读0次
subscribe(listener)

添加一个变化监听器,每当 dispatch action 的时候就会执行。

该方法主要有如下操作:
1、将listener推入listeners队列,等待dispatch action时调用。
2、修改isSubscribe的值。
3、返回unsubscribe函数。(函数内操作:1、修改isSubscribe值;1、listeners队列删除listener)

代码如下:

function subscribe(listener: () => void) {
    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/store#subscribelistener for more details.'
      )
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    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/store#subscribelistener for more details.'
        )
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
      currentListeners = null
    }
  }
replateReducer(nextReducer)

这个方法没怎么用到过,代码写法也有地方没看懂。。。

主要操作:
1、将当前reducer替换为nextReducer。
2、dispatch一个replace action。(dispatch的操作就是上面那个函数里的,修改属性状态啦,执行所有listener啦,返回action啦)
3、返回store。

代码如下:

  function replaceReducer<NewState, NewActions extends A>(
    nextReducer: Reducer<NewState, NewActions>
  ): Store<ExtendState<NewState, StateExt>, NewActions, StateExt, Ext> & Ext {
    if (typeof nextReducer !== 'function') {
      throw new Error('Expected the nextReducer to be a function.')
    }

    ;((currentReducer as unknown) as Reducer<
      NewState,
      NewActions
    >) = nextReducer

    dispatch({ type: ActionTypes.REPLACE } as A)
    // change the type of the store by casting it to the new store
    return (store as unknown) as Store<
      ExtendState<NewState, StateExt>,
      NewActions,
      StateExt,
      Ext
    > &
      Ext
  }

createStore文件的主要内容就是这些,还有其他一些类型检测以及工具函数的代码未放上来,这个源码里都有。

相关文章

  • Redux源码阅读_1(下)

    subscribe(listener) 添加一个变化监听器,每当 dispatch action 的时候就会执行。...

  • redux 源码阅读

    redux 源码阅读 首先从 redux 的官方示例来看 redux 的作用 这样简单一看的话, redux 感觉...

  • Redux源码阅读_1(上)

    前言 看完 Redux文档,对Redux的内部运作不是很了解,大致问题记录如下: 容器组件怎么通过connect将...

  • Redux源码解读

    今天向大家简单介绍下Redux源码,若有理解差误,欢迎在下面留言~ Redux源码地址:https://githu...

  • 重读redux源码

    之前5.1假期的时候,有去读了下redux的源码,当时感触很深,今天重新梳理遍redux的源码:从源码中的src文...

  • redux源码阅读

    Redux 是可预测的状态管理框架,它很好的解决多交互,多数据源的诉求。 三大原则: 单一数据源:整个应用的sta...

  • 一起学react(4) 史上最详细react-redux 源码分

    今天来分析一下react-redux源码react-redux所有代码注释地址:https://github.co...

  • redux源码阅读——applyMiddleware

    redux源码——applyMiddleware 相关源码展示 applyMiddleware源码 compose...

  • redux源码阅读记录

    标签(空格分隔): redux javascirpt createStore 导语: 最近在看 redux,也看了...

  • Redux源码阅读_2

    compose.ts 从右到左来组合多个函数,是reduce函数的一个应用实现。 首先仍然是重载了多个参数的函数声...

网友评论

      本文标题:Redux源码阅读_1(下)

      本文链接:https://www.haomeiwen.com/subject/ikafdktx.html