在Reducer中更新对象属性而无需更改

Question

我觉得我的减速器应该工作，但是它一直坚持说我正在改变状态。

未捕获的错误：在调度内的以下路径中检测到状态突变： output.outputList.0.composition 。 看一下处理动作{“ type”：“ SET_OUTPUT_COMPOSITION”的减速器，

我几个小时前发布了类似的内容，但没有答案，但是我发现自己的redux状态太复杂了。 这是我的简化版本，但仍然出现变异错误..我在做什么错？ 我应该在redux状态下不使用类吗？ 我应该使用某种不可变库吗？ 请帮我。

我的初始Redux状态

output: {
    outputList: [], //composed of Output class objects
    position: 0
  }

输出类别

class Output {

  constructor(output) {
      this.id = output.id;
      this.composition = output.getComposition();
      this.outputObj = output;
      this.name = output.name;
      this.url = output.getUrl();    
  }
}

export default Output;

用于更新属性的减速器

case types.SET_OUTPUT_COMPOSITION: {
      let outputListCopy = Object.assign([], [...state.outputList]);
      outputListCopy[state.position].composition = action.composition;
      return Object.assign({}, state, {outputList: outputListCopy});

行动

export function setOutputComposition(comp) {
 return { type: types.SET_OUTPUT_COMPOSITION, composition: comp}
}

Answer 1

传播运算符不会深度复制原始列表中的对象：

let outputListCopy = Object.assign([], [...state.outputList]);

这是一个浅表副本，因此

outputListCopy[state.position].composition = action.composition;

实际上，您实际上是在改变先前的状态对象，正如您在评论中所说的那样，有几种方法可以解决此问题，可以使用slice / splice创建数组的新实例，等等。

您还可以看一下使用ImmutableJS的情况 ，通常来说，将类存储在redux存储中会使事情有点难以理解，我倾向于使用可以通过redux-tools轻松检查的简单结构。

Answer 2

错误来自dispatch 。 因此，它甚至没有达到reducer 。 我希望它不喜欢您使用class来定义output 。 而是只做const output ={ ... } 。