Redux Getting Started Guide (II)

Author: jogis
Original link:https://github.com/yesvods/Blog/issues/7
For reprint, please indicate the original link and author information

The first part introduces the core idea of Redux as a state containerstateInitialization, toactionBe distributed and change state. The subsequent extensions focus on the core idea, and are also benefiting from other extensions such as functional programming. Redux has become the most popular react state management framework at present.

store

In Redux, the store instance has four methods:getState,dispatch,subscribe,replaceReducer。
The first two are the core methods of store, which are used to obtain state and change state respectively.
subscribeIt is used to subscribe to state change events. Every time the state of the store changes, the subscribed function will be called.
replaceReducerIt is used to replace the reducer used to create the store. For example, after jumping from page a to page B, you only need to replace the reducer to make page B use the required state. It is very useful when loading the state on demand.

The simplified store creation code is very simple:

function createStore(reducer, initialState){
    let currentState = initialState;
    return {
        getState: () => currentState,
        dispatch: action => {
            currentState = reducer(currentState, action)
        }
    }
}

reducer

reducerIs a simple pure function(currentState, action) => nextState
Receive the current status andactionAs a parameter, according toactionType and information, rightstateModify and return to the lateststate。

For example, a zoo has cats and dogs. Now you need to add some cats and dogs:

function cat(state = [], action){
    if(action.type === constant.ADD_CAT){
        state.push(action.cat);
        return state;
    }else {
        return state;
    }
}

function dog(state = [], action){
    if(action.type === constant.ADD_DOG){
        state.push(action.dog);
        return state;
    }else {
        return state;
    }
}

//Add tom cat
dispatch({
    type: constant.ADD_CAT,
    cat: {
        name: 'Tom'
    }
});

//Add Jerry dog
dispatch({
    type: constant.ADD_DOG,
    dog: {
        name: 'Jerry'
    }
});

Previously mentioned is the single data source principle. An application should have only one data source (state), but a reducer will produce onestate, how to combine two reducers, cat and dog. Redux provides tool functionscombineReducers, combine multiple reducres. We can write multiple reducer functions, and each function only focuses on its own state modification (such as cat function, which only focuses oncatModification of this state, regardless ofdogStatus).
And, bycombineReducersAfter synthesizing a reducer, you can continue to use itcombineReducersRe synthesize the synthesized reducers, which is very convenient to generate an application state tree. This is why reducr only needs one data source to manage the whole state of large-scale applications.

For example:

//Homeanimals become reducers
const homeAnimals = combineReducers({cat, dog});

// nextState:
// {
//   cat: [{...}],
//   dog: [{...}]
// }
const nextState = homeAnimals(state, action);

Higher level status tree:

cons zoo = combineReducers(homeAnimals, otherAnimals);

// nextState:
// {
//   homeAnimals: {...},
//   otherAnimals: {...}
// }
const nextState = zoo(state, action);

Synthetic reducerzooA deeper nested state tree is generated.

To be continued