Remove data from nested objects without mutating

javascript immutability redux mutation
Daniel Storch picture Daniel Storch · Feb 11, 2016 · Viewed 9.3k times · Source

Is there any elegant way of removing an object from an array which is part of an array? I have been working with React and Redux for a while now but get stuck several hours everytime I have to remove or insert data without mutating the state.

The reducer is an array containing objects which have an ID and another array with objects, like this:

[
 { id:123,
   items:[
           { id: abc,
             name: albert
           }, 
           ... 
         ]
 }, 
 ... 
]

I receive both IDs and need to remove the item with ID abc.

Answer

Dan Abramov picture Dan Abramov · Feb 27, 2016

To remove an item from an array by id:

return state.filter(item => item.id !== action.id)

To remove a key from an object by id:

let copy = Object.assign({}, state) // assuming you use Object.assign() polyfill!
delete copy[action.id] // shallowly mutating a shallow copy is fine
return copy

(Bonus) The same with object spread operator proposal:

let { [action.id]: deletedItem, ...rest } = state
return rest

Related questions

Remove a property in an object immutably

I am using Redux. In my reducer I'm trying to remove a property from an object like this: const state = { a: '1', b: '2', c: { x: '42', y: '43' }, } And I want to have something like …

Read More
Why should objects in Redux be immutable?

Why should objects in Redux be immutable? I know that some frameworks such as Angular2 will use onPush and can take advantage of immutability to compare states of views for faster rendering, but I am wondering if there are other …

Read More
why my redux state not updating

state not updating.when action is dispatched the state should update to isAuthenticated to true..but the state not updating..redux returning the initial state not the updated state. export function setCurrentUser(user) { console.log(user); return { type: "SET_CURRENT_…

Read More