How to delete a specific item from react redux store?

Question

I'm trying to delete a specific item from a React Redux store. My initialState is a multidimensional array:

{
    "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
                }
            ]
        }
    ]
}

Now, I want to delete the item with id:1 from the parent array with ID '01-00-1234567890' from the store.

My current reducer function looks like this:

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))
    }
  }

I'm new to Redux and React and need help here

Many Thanks

Answer 1

const state = {
  data: {
    "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
          }
        ]
      }
    ]
  }
};

const itemId = '01-00-1234567890';
const positionId = 1;
const nextState = state.data.flex.map(v => {
  if(v.id === itemId) {
    return {
      ...v,
      positions: v.positions.filter(pos => pos.id !== positionId)
    }
  }
  return v;
});

console.log('nextState: ', nextState);