将项目添加到特定列表数组 redux

Question

I know there is a lot of similar threads but I didn't find a solution there.

Okay so I have a state which looks:

[
{
    id: 1,
    title: 'todo',
    items: [
        {
            itemID: 1,
            itemText: 'finish this project'
        },
        {
            itemID: 2,
            itemText: 'take trash out'
        },
        {
            itemID: 3,
            itemText: 'sleep'
        },

    ]
},
{
    id: 2,
    title: 'doing now',
    items: [
        {
            itemID: 1,
            itemText: 'add redux'
        },
        {
            itemID: 2,
            itemText: 'fixing bugs'
        },
    ]
},
{
    id: 3,
    title: 'done',
    items: [
        {
            itemID: 1,
            itemText: 'add components'
        },
        {
            itemID: 2,
            itemText: 'add material ui'
        },
    ]
}

]

and I have a redux reducer that should add an item into specific list, I have id of that list, and itemText which I should add. I managed somehow to make it kinda work, it is adding item into specifin array but problem is that also creates new blank list. Here is how reducer looks:

case "ADD_ITEM":
  return [
    state.map((list)=>(
    (list.id === action.payload.id) ?  list.items.push({
      itemID: 89,
      itemText: action.payload.description
    }) : list
    
  ))
  ]

Any idea how to add an item to specific list items without creating a new list?

Answer 1

Map and return the lists ( state ), and use spread syntax to update the items :

case "ADD_ITEM":
  return state.map(list =>
    list.id === action.payload.id ? {
      ...list,
      items: [
        ...list.items,
        {
          itemID: 89,
          itemText: action.payload.description
        }
      ]
    } : list
  )

Answer 2

Try this:

case "ADD_ITEM":
    state.forEach((list, index)=>(
    if (list.id === action.payload.id){
      state[index].items.push({
        itemID: 89,
        itemText: action.payload.description
      }
    })
    
  ))

Note that this is pseudocode, but it should still work.

Your example was not working because you were return ing a new array, which had (about) the same structure as state , except with the added element. To add it, simply add it directly to state without using map + return , thereby not creating a new array.