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

Question

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

假设我有一个对象(为简单起见，我现在不使用类或接口(interface))，它表示我在 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]
}

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