Redux-toolkit 深度嵌套的平面映射数据不更新状态答案

【问题标题】：Redux-toolkit deeply nested flatmapped data not updating stateRedux-toolkit 深度嵌套的平面映射数据不更新状态
【发布时间】：2021-11-01 14:03:00
【问题描述】：

我有深度嵌套的数据，需要更新一些深度嵌套的孩子。目前我通过平面映射两个上层列表，然后搜索所有可能的任务，然后通过调用 init 函数来改变任务。

const tasks = state.data.flatMap((p) => p.hierarchyLines).flatMap((h) => h?.tasks);
const task = tasks.find((t) => t?.id === payload.id);
task?.init(payload);

task.init（数据：任意）：

this.id = _data["id"];
this.start = _data["start"] ? new Date(_data["start"].toString()) : <any>undefined;
this.deadline = _data["deadline"] ? new Date(_data["deadline"].toString()) : <any>undefined;
...

这不起作用，关于它为什么不更新状态的任何建议？

【问题讨论】：

这能回答你的问题吗？ Why can't I directly modify a component's state, really?
@Ergis ：我猜，redux-toolkit 标签在这里值得关注，因为它有 Immer 在引擎盖下翻译状态突变为不可变更新。
@YevgenGorbunkov 实际上并不知道。所以谢谢你的通知:)
正如@YevgenGorbunkov 正确所说，重要的是 immerjs 标签（我猜）

标签： react-redux redux-toolkit immer.js

【解决方案1】：

如果有人遇到类似的问题。问题是 immer 不能很好地处理课程。 https://immerjs.github.io/immer/complex-objects

对我来说，解决方案是先复制状态，然后对其进行变异，然后按照此处所述返回副本：https://redux-toolkit.js.org/usage/immer-reducers#immer-usage-patterns

    builder.addCase(fetch.fulfilled, (state, { payload }) => {
      const stateCopy = _.cloneDeep(state);
      stateCopy.loading = false;
      const tasks = stateCopy.data.flatMap((p) => p.hierarchyLines).flatMap((h) => h?.tasks);
      const task = tasks.find((t) => t?.id === payload.id);
      task?.init(payload);
      return stateCopy;
    });

【讨论】：