Почему мы должны распространять состояние перед обновлением в редуктор Redux?

Question

Просто простой вопрос для профи. Я строю редуктор, и фрагмент кода выглядит следующим образом:

export const cusDataReducer = (state = cusDataInitialState, action) => {    
    let newState = {...state}
    switch (action.type) {
        case "CUS_READ":
            newState.data = action.value;
            newState.loading = false;                        
            break;
...

У меня вопрос: в чем разница между state и {...state} в этом случае? Если я изменяю newState=state, код ломается. Однако журналы консоли state и {...state} выглядят одинаково.

Это мой магазин:

import {cusDataReducer} from './cusdata'

let rootReducer = combineReducers({
    cusdata: cusDataReducer
});
export const Store = createStore(rootReducer,applyMiddleware(thunk))

Answer 1

Это не создает новый объект:

let newState = state;

Переменная newState просто указывает на тот же объект, что и state. Изменение этого объекта изменяет текущее состояние, что является плохим.

Это, однако, создает новый объект:

let newState = {...state};

Оператор распространения (...) в основном очень удобное сокращение для заполнения этого нового объекта каждым свойством существующего объекта. Более длинная версия может выглядеть примерно так:

let newState = {
    prop1: state.prop1,
    prop2: state.prop2,
    //etc.
};

При создании нового объекта оно больше не является текущим фактическим состоянием. Вы можете изменить свой новый объект, как вам нравится. После его возврата Redux заменит все текущее состояние на все новое.