NGRX reducer中的更新状态是不可变的

Question

我对如何在NgRx reducer中更新状态有点困惑，这里是问题。

假设我有一个状态

{
xxx: num
yyy: classtpe
... 
data: Data[]
}

如果我有一个动作要添加一个Data项到列表中。

我知道我不能调用data。push()因为那只是更新数组但是数据指向同一个数组所以在reducer中我有

state.data = cloneDeep(state.data)
state.data.push(newdata)

状态。现在的数据与以前的数据不同，因为它们是两个独立的数组。

我的问题是，我现在可以直接返回状态吗?如果是，则旧状态和新状态指向相同的变量，它们具有完全相同的成员，除了data。

另一种方法是返回一个全新的状态，比如

return Object.assign({}, state, {
data: [...state.data, newdata]
})

或

const newstate = cloneDeep(state)
newstate.data.push(new data)
return newstate

这样新旧状态完全不同。

我认为这实际上与NgRx中如何检查差异有关?首先，它们需要遍历每个成员，如果任何成员不同，那么状态就不同?

第二种方法:两种状态是不同的，但是需要检查所有成员的内容是否相同。

Answer 1

我建议你使用ngrx-immer, https://github.com/timdeschryver/ngrx-immer

它是一个围绕ngrx reducer的Immer包装器，因此您可以可变地更新所有状态，它将为您完成其余的工作。redux-toolkit中还使用了Immer，使更新状态变得简单。