redux source code interpretation (1)

Source code interpretation of redux (1)

The first is the simple version of redux. It mainly implements the first version of API according to its own ideas, without any exception handling

function createStore(reducer, initialState) {
    let currentState = initialState,
        listeners = [];
    function getState() {
        //Returns the current state
        return currentState;
    }
    function dispatch(action) {
        let prestate = currentState;
        currentState = reducer(prestate, action);
        listeners.forEach((item) => item());
    }
    function subscribe(callback) {
        //The return value is unsubscribe
        let hasUnsubscribe = false;
        listeners.push(callback);
        return function unsubscribe() {
            if (!hasUnsubscribe) {
                let index = listeners.indexOf(callback);
                listeners = listeners.splice(index, 1);
            }
        }
    }
    function replaceReducer(newReducer) {
        reducer = newReducer;
    }
    return {getState, dispatch, subscribe, replaceReducer}
}

function testReducer(state = {sum:0}, action) {
    switch (action.type) {
        case 'ADD':
            return {
                ...state,
                sum: state.sum + 1
            }
        case 'DEC':
            return {
                ...state,
                sum: state.sum - 1
            }
        default:
            return state;
    }
}
const store = createStore(testReducer);
//test
console.log('begin',store.getState());//begin undefined
store.subscribe(() => console.log('Triggered action',store.getState()));
store.dispatch({type:'ADD'});//action {sum: 1} triggered
console.log('end',store.getState());//end {sum: 1}

In this case, there is a problem. When we do not go to dispatch, the initial state is undefined, which obviously does not meet the requirements of redux API. In the redux API, our initial state can be passed in from the reducer or from the createStore. However, if the state is not passed in from the createStore in our code, the state is undefined (from the above log information) before there is nothing to dispatch... Therefore, when you create a store instance, you should dispatch it first. from Source code of redux You can see the dispatch ({type: ActionTypes.INIT}) during initialization. This ActionTypes.INIT is a random number. Let's make a few changes.

function createStore(reducer, initialState) {
    let currentState = initialState,
        listeners = [];
        dispatch('initial');//During initialization, under dispatch
    function getState() {
        //Returns the current state
        return currentState;
    }
    function dispatch(action) {
        let prestate = currentState;
        currentState = reducer(prestate, action);
        listeners.forEach((item) => item());
    }
    function subscribe(callback) {
        //The return value is unsubscribe
        let hasUnsubscribe = false;
        listeners.push(callback);
        return function unsubscribe() {
            if (!hasUnsubscribe) {
                let index = listeners.indexOf(callback);
                listeners = listeners.splice(index, 1);
            }
        }
    }
    function replaceReducer(newReducer) {
        reducer = newReducer;
    }
    return {getState, dispatch, subscribe, replaceReducer}
}

function testReducer(state = {sum:0}, action) {
    switch (action.type) {
        case 'ADD':
            return {
                ...state,
                sum: state.sum + 1
            }
        case 'DEC':
            return {
                ...state,
                sum: state.sum - 1
            }
        default:
            return state;
    }
}
const store = createStore(testReducer);
console.log('begin',store.getState());
store.subscribe(() => console.log('Triggered action',store.getState()));
store.dispatch({type:'ADD'});
console.log('end',store.getState());

At this point, our simple version of redux's createStore is implemented. Of course, we did not do any exception handling hhh. We will discuss other parts later,

Posted on Sun, 03 May 2020 20:29:41 -0400 by mtb211