Redux 更新嵌套数据 [不可变更新模式]答案

【问题标题】：Redux updating nested data [Immutable Update Patterns]Redux 更新嵌套数据 [不可变更新模式]
【发布时间】：2020-02-08 12:27:35
【问题描述】：

任何人都可以帮助解决此更新模式。我没有使用任何像 immer 这样的库。

我必须更新一个嵌套对象，并且数据看起来像 dis

样本数据

    { 
      isFetching: false
      data:{
            nba : {
                    stack :{
                            1:[]
                           }
                  }
           }
    }

我的减速器

 {
        ...state,
        isFetching: false,
        data: {
          ...state.data,
          [action.payload.team]: {
            ...state[action.payload.team],
            [action.payload.framework]: {
              ...state[action.payload.framework],
              [action.payload.build]: action.payload.resp
            }
          }
        }
 };

我可以更新到第二级，但无法更新第三个孩子。谁能告诉我我想念它的地方。

我在代码沙盒上放了一个演示。 https://codesandbox.io/s/todos-0ygrs

单击折叠和内部折叠项。我正在下面的控制台中记录状态的更改。正如您在上一级看到的那样，内部版本号正在被新版本所取代。

当前行为 在你扩展 nba 和所有三个孩子之后

  {
    nba: {
           stack:{
                  3:[]
          }
  }

预期行为： 在您展开堆栈和所有三个孩子之后

【问题讨论】：

@joseph.. 不，你扩展了所有子面板吗？..我没有看到上面提到的预期行为..它只显示了我们最后扩展的 1 个面板 ID 例如：堆栈{ 1: [ ] } 如果我们展开第二个面板，它正在更新为 stack: { 2: [ ]} .. 我在哪里寻找 stack:{ 1:[ ], 2:[ ]}

标签： reactjs ecmascript-6 redux immutability

【解决方案1】：

您可能必须使用get helper，因为您可能会尝试设置尚不存在的状态的一部分。

使用 get 助手，您可以像这样设置状态：

const { team, framework, build, resp } = action.payload;
const newState = {
  ...state,
  isFetching: false,
  data: {
    ...get(state, ['data']),
    [team]: {
      ...get(state, ['data', team]),
      [framework]: {
        ...get(state, ['data', team, framework]),
        [build]: resp,
      },
    },
  },
};

【讨论】：

【解决方案2】：

不知怎的，我发现了我的错误，希望它对将来的人有所帮助

初始状态不应该为null，应该是空对象，更新模式应该是这种方式

 {
    ...state,
    isFetching: false,
    data: {
      ...state.data,
      [action.payload.team]: {
        ...state.data[action.payload.team],
        [action.payload.framework]: {
          ...state.data[action.payload.team][action.payload.framework],
          [action.payload.build]: action.payload.resp
        }
      }
    }
  };

如果失败，那么试试这个方法

let teamTemp = { ...state.data[action.payload.team]}

     {
        ...state,
        isFetching: false,
        data: {
          ...state.data,
          [action.payload.team]: {
            ...teamTemp ,
            [action.payload.framework]: {
              ...teamTemp[action.payload.framework],
              [action.payload.build]: action.payload.resp
            }
          }
        }
      };

我已经分叉了我的代码框并更新了最新的代码。

旧代码：https://codesandbox.io/s/todos-0ygrs

新代码：https://codesandbox.io/s/todos-zqeki

【讨论】：