Question

我打算用Angular 5创建一个大型应用程序。我也想使用Ngrx来存储我的应用程序的状态。但有一件事我不明白。

假设我有一个对象（为简单起见，我现在不使用类或接口），它表示我在Store中的状态：

let state = {
    x: 10,
    y: [1, 2, 3]
};

在我读过的每篇文章中，作者都使用Object.assign()在reducer中创建状态的副本。例如：

...
case SET_X:
    return Object.assign({}, state, {x: 123});
...

但这不会创建状态的深层副本。所以新状态的y数组与旧状态相同。我认为这违背了Redux / Ngrx的概念。

这是否意味着我必须使用List Immutable.js或类似的东西，并且每篇文章都是“错误的”？或者我错过了什么？我认为这不是一个非常特殊的案例。

Answer 1

不，你不必使用Immutable.js（我不建议你）。

如果你想更新数组，假设添加一个值，你应该这样做：

const state = {
  x: 10,
  y: [1, 2, 3]
};

const newState = {
  ...state,
  y: [...state.y, 4]
}

在这里你可以注意到两件事：
- 您可以使用带有对象
的spread运算符，而不是使用Object.assign - 要保持数组的不变性，您必须创建一个新的引用。您也可以在Array上使用spread运算符，然后只添加一个新值。如果您想要在y: [4, ...state.y]之前而不是之后添加它，如果您要删除数组中的所有3：y: state.y.filter(nb => nb !== 3)

Ngrx用数组存储不可变状态？

1 个答案: