How to Delete an Item in a Nested Object in Redux State

Your Redux state can get complex, here’s how to remove nested data

Photo by Lysander Yuen on Unsplash

One of the key features of Redux is its store; it holds the logic of your application as a state object.

In essence, you get a limited number of methods that can be triggered in the store. For example, use getState as a mechanism for reading the current state tree.

You might ask: “What about writing to state?”

Well, that’s where dispatch(action) comes in. This is the only way in Redux to trigger state change. Dispatching actions are tied closely with the reducer concept. The reducer receives both action and state and returns a new application state.

The golden rule is that we do not return a mutated state, but rather a new state. Depending on the type of your action, you might need to update your state tree in various forms when it hits the reducer.

• You might need to add a new item to one of the state properties.

• There might be a need to update or re-assign a state property.

• Or you can have a scenario where you need to remove an item from a state property.

This brings us to the concept of Redux’s immutable update (or data modification) patterns. Immutability is key because we never want to directly change a value in the state tree, but rather always make a copy and return a new value based on the old value.

State properties can have many different types. But when we talk about the challenges of data modification patterns, Array and Object can be considered the ones with more edge cases.

In this article, we are going to focus on a specific Redux data modification pattern that concerns deleting an item in a nested object on a state tree.

---

Tip: I completely understand that software interviews can be a bit scary, so my hope is to give you clear ideas about the interview process and offer you practical advice on how to do well at each step.

This course can be very helpful for you to get an overview of all the common interview steps that companies go through to hire a developer. Sign up for SkillShare, Get two months of free trial and Join me on this journey

---

Use Case: Deleting an Item in a Nested Object in Redux State

Let’s imagine we have a fashion e-commerce application with the following initial state.

The state tree is simple and includes a few object keys like outfits or filters.

In our application, we have a filtering mechanism that filters outfits based on attributes like brand** **or colour. For instance, if the user is interested in seeing outfits of Bally brand with Black colour and does the filtering; that will result in the following state tree.

If we want to have a more user-friendly application, we might be interested in displaying the filters that the user has selected; right below the filtering system.

In this way, the user has the option to see all of the filters they have chosen and can remove the filters they are no longer interested in.

For achieving this goal, we need to have a removeFilter** actionCreator **that takes the field type (for example, brand) and index (for instance, the first element) in the displayed filters and removes that particular filter value from the corresponding element in the state tree.

The below code shows the rendering part. The buttons are rendered by iterating over a filtered list which renders Buttons and provides the index and the field to them.

---

Repo

If you’re interested, here’s a repo that better shows the use case we covered in this article.

---

Tip: I completely understand that software interviews can be a bit scary, so my hope is to give you clear ideas about the interview process and offer you practical advice on how to do well at each step.

This course can be very helpful for you to get an overview of all the common interview steps that companies go through to hire a developer. Sign up for SkillShare, Get two months of free trial and Join me on this journey

---