如何在React Redux中删除Store多维数组内的指定子项？

我正尝试从React Redux Store中删除特定项，初始状态是一个多维数组：

{
    "flex": [
        {
            "id": "01-00-1234567890",
            "positions": [
                {
                    "id": 0,
                    "bezeichnung": "24V LED Stripe IP00, 380lm/m, 2700K, 4,8W/m - 5000 mm (24 W)",
                    "artikelnummer": "B15201027",
                    "zusatz": "5000",
                    "menge": 1,
                    "bp_produkt": 63.7,
                    "bp_gesamt": 63.7
                },
                {
                    "id": 1,
                    "bezeichnung": "24V LED Driver 25W",
                    "artikelnummer": "370202500",
                    "zusatz": "0",
                    "menge": 1,
                    "bp_produkt": 68.82,
                    "bp_gesamt": 68.82
                }
            ]
        },
        {
            "id": "01-01-1234567890",
            "positions": [
                {
                    "id": 0,
                    "bezeichnung": "24V LED Stripe IP00, 380lm/m, 2700K, 4,8W/m - 5000 mm (24 W)",
                    "artikelnummer": "B15201027",
                    "zusatz": "5000",
                    "menge": 1,
                    "bp_produkt": 90.7,
                    "bp_gesamt": 90.7
                },
                {
                    "id": 1,
                    "bezeichnung": "24V LED Driver 25W",
                    "artikelnummer": "370202500",
                    "zusatz": "0",
                    "menge": 1,
                    "bp_produkt": 101.82,
                    "bp_gesamt": 102.82
                }
            ]
        }
    ]
}

现在我想要从Store中删除父数组ID为01-00-1234567890下id为1的项。

我当前的reducer函数如下：

deletePosition(state, action) {
      const itemId = action.payload.konfigId // 01-00-1234567890
      const positionId = action.payload.row.position // 1

      console.log(current(state))

      state.data.flex = state.data.flex
        .filter(items => {
          return items.id == itemId
        })
        .map(pos => pos.positions.filter(p => p.id == positionId))
    }
  }

问题分析与解决方案 #

当前reducer存在几个问题：

• 使用filter只保留了目标父项，直接丢失了其他父元素（比如id为01-01-1234567890的项）
• 第二个filter用了== positionId，这是保留符合条件的项，而不是删除，逻辑完全相反
• 写法没有生成正确的数组结构

下面是修正后的reducer：

deletePosition(state, action) {
  const itemId = action.payload.konfigId; // 01-00-1234567890
  const positionId = action.payload.row.position; // 1

  // 遍历所有flex父项，只修改目标父项的positions数组
  state.data.flex = state.data.flex.map(flexItem => {
    // 非目标父项直接原样返回，不改动
    if (flexItem.id !== itemId) {
      return flexItem;
    }
    // 复制目标父项对象，过滤掉要删除的position项
    return {
      ...flexItem,
      positions: flexItem.positions.filter(pos => pos.id !== positionId)
    };
  });
}

关键说明 #

• 用map遍历所有父项，保证除了目标项外，其他数据都完整保留
• 对目标父项使用扩展运算符...flexItem复制原对象，避免直接修改原数据（符合Redux的不可变更新原则）
• 用filter(pos => pos.id !== positionId)过滤掉要删除的项，实现删除逻辑
• 从你直接修改state.data.flex的写法来看，应该是用了Immer，这个写法完全适配Immer的语法

内容的提问来源于stack exchange，提问作者Holterwok