为什么我们需要在 Redux reducer 中更新状态之前传播状态？

Question

对于专业人士来说只是一个简单的问题。我正在构建一个reducer，一段代码如下所示：

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 会用整个新状态替换整个当前状态。