如何在NgRx中修改状态里嵌套对象的属性值？

在NgRx中必须遵循状态不可变原则，不能直接修改嵌套对象的属性，需要通过逐层拷贝对象的方式生成新状态。针对你的代码，正确修改MyState.money.dollars的写法如下：

修正后的Reducer代码 #

import { createReducer, on } from '@ngrx/store';
import { Money } from '@models/money';
import { setMoney } from '@actions/money.actions';

export interface MyState {
    money: Money;
    status: 'pending' | 'loading' | 'error' | 'success';
    error: string;
}

export const initialState: MyState = {
    money: {
        dollars: 10,
        cents: 60,
    },
    status: 'pending',
    error: ''
}

export const myReducer = createReducer(
    initialState,
    on(setMoney, (state, { value }) => ({
        ...state, // 拷贝原状态的顶层属性
        money: {
            ...state.money, // 拷贝原money对象的所有属性
            dollars: value  // 替换dollars为新值
        }
    }))
);

关键说明 #

• 首先用...state拷贝顶层状态的所有属性，保留status、error等未修改的字段。
• 针对嵌套的money对象，同样用...state.money拷贝原有属性，再覆盖需要修改的dollars字段，这样既更新了目标属性，又保证了其他嵌套属性（比如cents）的不变性。

修改cents属性的写法 #

如果需要修改cents，只需要把上述代码中的dollars: value替换为cents: value即可：

money: {
    ...state.money,
    cents: value
}

同时修改多个嵌套属性 #

如果你的setMoney动作需要同时更新dollars和cents，可以在动作中传递多个参数，然后在Reducer中同时覆盖：

// 假设setMoney动作定义为：createAction('[Money] Set Money', props<{ dollars: number, cents: number }>())
on(setMoney, (state, { dollars, cents }) => ({
    ...state,
    money: {
        ...state.money,
        dollars,
        cents
    }
}))

内容的提问来源于stack exchange，提问作者Scottish Smile