Using a reducer

    const initialState =
    {
        id          : 2,
        name    : 'myName', 
    }
    import { createStore } from 'redux';
    const reducer = function(state=initialState, action) {
                    //...        
        return state;
    }
    const store = createStore(reducer);

In this case, the reducer function will judge and process all action s. The state parameter passed in is the complete set of states in the entire store. It could be this:

    {
                id          : 2,
                name    : 'myName', 
    }

Using combinedreducers to compound multiple reducers

    const user = (state = [], action) => {
        switch (action.type) {
            case 'RENAME':
                //...
            default:
                return state;
        }
    }

const product = (state = [], action) => {
        switch (action.type) {
            case 'SOLD':
                //...
            default:
                return state;
        }
    }

const reducers = combineReducers({
    user,
    product,
});

const store = createStore(reducers);

In this case, each reducer will process the related action and return the related status. (the actual implementation is that combine reducers merge all reducers to form a large reducer.).

The state of the entire store is as follows:

{
        user: {
            id: 0,
            name: 'myNmae',
        },
        product: {
                id: 0,
                is_sold: 0,
        }
}

It can be seen that this is a tree structure, and the data processed by each reducer is in its own branch structure. Therefore, each reducer can be written independently without paying attention to the data (state) processing methods of other reducers. Similarly, when dispatch ing, you only need to send the relevant content.
For example, write a "I" reducer:

        const initialState =
        {
            name                 : null,
            displayName     : null,
        };

        const me = (state = initialState, action) =>
        {
            switch (action.type)
            {
                case 'SET_ME':
                {
                    const { name, displayName } = action.payload;
                    return { name, displayName };
                }
                default:
                    return state;
            }
        };

//To set the properties for me, just:
store.dispatch({
    type    : 'SET_ME',
    payload : { "jacky", "Xiao Wang"}
});

However, in fact, after each dispatch is issued, all reducer s will be called once (most of which are irrelevant and directly return to their own state). Finally, a complete state tree will be returned, as seen above.

Coding proposal

For complex applications, you can write multiple reducer s, each of which focuses on one class of state.
The implementation of multiple reducers can be implemented in one file, or each reducer can use a separate file (convenient for division of labor).