How to update(add and remove) items in redux nested list : Redux, React

Question

This is what my initial state looks like:

Fruits: {
    34: {
        FruitsID: 34,
        FruitsList:{apple, pineapple, banana}
        }
}

Here, I want to add fruit items such as 'peach' or 'pear' and remove 'apple' and 'banana'. My 'add fruits' reducer returns what I wrote below, but it seems like this is not working because of the id. However, I do need to use id since there will be several fruit lists, not only one. ex: Fruits:{ 23: {...}, 3980: {...}, 129: {...} }

Fruits: {
          [action.id]: {
            …state.Fruits[action.id],
            FruitsID: action.id,
            FruitsList: {
              ...state.Fruits[action.id].FruitsList.push(action.fruit),
            },
          },
}

I tried reading several related posts, but couldn't find the one that's applicable for my case.

if I do this(below), then there's a syntax error under action.fruit saying that it expected ','?

Fruits: {
          [action.id]: {
            …state.Fruits[action.id],
            FruitsID: action.id,
            FruitsList: {
              ...state.Fruits[action.id].FruitsList,
              action.fruit
            },
          },
}

Can you read this posts before answered by someone? https://stackoverflow.com/a/35592211/7364894 https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#updating-nested-objects — Thakur Karthik, Jun 22 '20 at 06:41
@ThakurKarthik I did use spreading! Can you tell me why you recommended that post? Is it because of the immutability? I'm trying not to use it since my state is not too complicated, but please let me know if I'm wrong! — AlexCho, Jun 22 '20 at 06:48
@ThakurKarthik I'm sorry but I think I'm not sure what you meant by "after filtering add the new objects"... I haven't implemented removing reducer yet, the code above is what I return in adding reducer. Can you perhaps explain how can I add fruit by using filter method? — AlexCho, Jun 22 '20 at 06:56
why is your fruitlist an object..iam assuming that it is an array. — Thakur Karthik, Jun 22 '20 at 06:59
can you create a small demo with you issue so others may point out where you are making mistake..see this for pushing value in array https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos?file=/src/reducers/todos.js — Thakur Karthik, Jun 22 '20 at 07:02

score 0 · Answer 1 · answered Jun 22 '20 at 07:23

i test this and had two problem:

Fruits: {
          [action.id]: {
            …state.Fruits[action.id],
            FruitsID: action.id,
            FruitsList: {
              ...state.Fruits[action.id].FruitsList,
              action.fruit
            },
          },
}

1- in this line …state.Fruits[action.id], three dot seems not to be dot characters that should be, type it again or copy it= "..."!

2- convert this line " action.fruit" to this: "fruit:action.fruit" so currect code is like this:

Fruits: {
                [action.id]: {
                ...state.Fruits[action.id],
                FruitsID: action.id,
                FruitsList: {
                        ...state.Fruits[action.id].FruitsList,
                        fruit:action.fruit
                        }
                    }
                }
            }

How to update(add and remove) items in redux nested list : Redux, React

1 Answers1