在react redux reducer getting map（）中更新数组中的对象不是函数

Question

我有一个相当复杂/嵌套的redux存储，如下所示：

{
  object1
  {
    array:
    [
      object[1]: {
        id: 1,
        replace: ""
      }
      object[2]: {
        id: 2
        replace: ""
      }
      object[3]: {
        id: 3,
        replace: ""
      }
    ]
  }
}

在调度一个动作后，我需要根据ID将该动作插入到其中一个对象[]中。我目前正在使用以下脚本来更新减速器内的替换。但是，这会将数组更改为对象，因为对象2：{}的大括号。

case UPDATE:
  return {
    ...state,
    object1: {
      ...state.object1,
      array: {
        ...state.object1.array,
        [action.id]: {
          ...state.object1.array[action.id],
          replace: action.result
        }
      }
    }
  };

我的渲染将在此之后中断，因为object2.map在更改为object后不再是函数。如何在不将其转换为对象的情况下解决此问题？

以下操作将失败，出现语法错误：

case UPDATE:
  return {
    ...state,
    object1: {
      ...state.object1,
      array: [
        ...state.object1.array,
        [action.id]: {
          ...state.object1.array[action.id],
          replace: action.result
        }
      ]
    }
  };

Answer 1

下面是使用不可变性帮助包的代码。

case UPDATE:
  return update(state, {
    object1: {
      array: {
        [action.id]: {
          replace: {
            $set: action.result
          },
        },
      },
    }
  });

Answer 2

'您可以检查库immutadot。它的目的是以一种非常简洁的方式帮助更新复杂的嵌套数据结构，它的创建考虑了redux的使用。

在你的情况下，你可以这样写：

import { set } from 'immutadot'

...

  case UPDATE:
    return set(state, 'object1.arrary[' + id + '].replace', action.result)
    // or with templated string
    return set(state, `object1.arrary[${ id }].replace`, action.result)

...

它依赖于木材下的lodash，因此您可以使用lodash的所有功能。

Answer 3

你不能直接指定你想要用传播语法修改的索引，你需要先找到索引，然后像

case UPDATE:
  var idx = state.object1.object2.findIndex(obj => obj.id === action.id)
  return {
    ...state,
    object1: {
      ...state.object1,
      object2: [
        ...state.object1.object2.slice(0, idx),
        {
            ...state.object1.object2[idx],
            replace: action.result 
        }
        ...state.object1.object2.slice(idx + 1)
      ]
    }
  };

或者，您可以使用immutability helper包。有关如何操作的示例，请参见此答案

如何使用Immutability helper更新数组中的嵌套对象？