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

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 或类似的东西，并且每篇文章都是 "wrong"？或者我错过了什么？我不认为这会是一个非常特殊的案例。

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)

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

Ngrx store immutable state with an array?

angular

ngrx

ngrx-store