How to remove a nested array element in Redux Reducer?

Question

been banging my head against this for hours.

I am trying to remove a nested elment of an array in an object. It must be done immutably within a reducer, which is making it tricky.

Here is the object:

questions {
    0:
    answers: [{…}]
    createdAt: "2021-04-28T01:37:21.017Z"
    creator: "607f6ab0ee09c"
    likes: []
    name: "Firstname Lastname"
}

I want to remove just 1 element of the answers array. The problem is I don't know the exact element (of questions) until I search by 'creator' code, and then I can delete the answers element by key #.

I tried using map and filter, but with 3 layers deep that logic just never worked out. I'm also open to using Immutable-js.

thanks so much, quite a baffling issue for what seems like a simple thing to do.

EDIT: I realized I can determine the key of the top level questions object in the action creator and send it over to the reducer. So all I need to know how to do is remove an element of an array in an object, nested in another object.

thanks for any help!

"I tried using map and filter, but with 3 layers deep that logic just never worked out." Can you share the code? — Arun Kumar Mohan
– Arun Kumar Mohan, Commented Apr 28, 2021 at 6:00
@ArunKumarMohan unfortunately I delete it as it wasn't working in any way shape or form how I intended. — Myka
– Myka, Commented Apr 28, 2021 at 6:03
@ShubhamKhatri { Creator: 3282421 Likes: [] Body: "some message" } — Myka
– Myka, Commented Apr 28, 2021 at 6:10

Priyank Kachhela · Accepted Answer · 2021-04-28 06:26:22Z

1

First of clone your questions object by using ... ES6 operator

const clonedQuestion = {...questions}

Now for removing element from answers array

const indexOfElementToRemove = clonedQuestion.answers.findIndex(element => element.creator === clonedQuestion.creator);
if(indexOfElementToRemove >= 0) {
  clonedQuestion.answers.splice(indexOfElementToRemove, 1)
}

answered Apr 28, 2021 at 6:26

Priyank Kachhela

2,64511 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Myka Over a year ago

Thank you. I ended up needing to make clonedQuestion an array, not an object, and I also used a for loop instead of findIndex due to not being supported on IE, but the cloning of the state really helped!

phry · Accepted Answer · 2021-04-28 09:29:38Z

1

You might also take a look at the official redux toolkit, which would allow you to just use mutating logic like this in their createReducer- or createSlice- created reducers:

delete state.questions.answers[5]

See this tutorial page that gives a short overview over what we consider as "modern redux": https://redux.js.org/tutorials/fundamentals/part-8-modern-redux

If that is not something you want to do right now (keep in mind though, that modern redux and legacy redux can be mixed in an application), look into immer instead of immutable since immutable is essentially dead at this point and immer has a much better developer experience.

answered Apr 28, 2021 at 9:29

phry

44.9k7 gold badges96 silver badges111 bronze badges

1 Comment

Myka Over a year ago

Thank you for the great suggestion. This is one of the things I love and hate most about React. Always seems like there some great new thing to learn. For now I went with Priyank's suggestion below because it was plain JS, but I will study this in the future. Thank you.

Collectives™ on Stack Overflow

How to remove a nested array element in Redux Reducer?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related