Redux源码createStore解读常用方法

Redux源码createStore解读常用方法

传入参数

  • reducer,reducer行为函数
  • preloadedState,初始化state数据
  • enhancer,使用(中间件等),不常用
const store = createStore(reducer, [preloadedState], enhancer);

getState

直接返回当前currentState,获取state值,@return state(我觉得应该深克隆一个新的对象返回,不然有可能会被外部修改)

function getState() {
    if (isDispatching) {
        throw new Error('....');
    }
    // console.log(currentState);

    return currentState;
}

dispatch派发行为

执行派发行为,就会在内部执行reducer并且执行之前准备发布的函数listener ,@params action行为,@return action行为

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?');
        }

        if (isDispatching) {
            throw new Error('Reducers may not dispatch actions.');
        }

        try {
            isDispatching = true;
            currentState = currentReducer(currentState, action);
            //执行reducer函数,会在创建的时候dispatch把刚开始的preloadedState传进来执行
        } finally {
            isDispatching = false;
        }

        var listeners = currentListeners = nextListeners;

        for (var i = 0; i < listeners.length; i++) {
            var listener = listeners[i];
            listener();//发布订阅
        }

        return action;
    }

subscribe函数

redux发布订阅

  • 传入参数时@params function
  • 并用闭包保存数据,最后可以删除,@return function unsubscribe
function subscribe(listener) {
        if (typeof listener !== 'function') {//判断s listener是否函数
            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#subscribelistener for more details.');
        }

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

            isSubscribed = false;
            ensureCanMutateNextListeners();
            var index = nextListeners.indexOf(listener);
            nextListeners.splice(index, 1);
            //删除数组里面的函数,如果连续删除容易造成数组塌陷
            currentListeners = null;
        };
    }

如果有错,望大佬指出。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值