How to remove an object from an array in Immutable?

javascript remove object from array by key
redux remove an item from an array
redux update item in array
redux remove item from object
remove item from array without mutating
remove element from array javascript
array slice
react remove item from list

Given a state like this:

state = {
  things: [
    { id: 'a1', name: 'thing 1' },
    { id: 'a2', name: 'thing 2' },
  ],
};

How can I create a new state where ID "a1" is removed? It's easy enough to push new items:

return state.set(state.get('things').push(newThing));

But I can't figure out how to search for and remove an object by its id property. I tried this:

return state.set('tracks',
  state.get('tracks').delete(
    state.get('tracks').findIndex(x => x.get('id') === 'a2')
  )
)

But it seems messy, plus it only works if the item is found, because if findIndex returns -1, that's a valid value for delete.

You can use Array#filter.

return state.set('things', state.get('things').filter(o => o.get('id') !== 'a1'));

Remove an Array Element Without Mutation, To remove elements from an array in an immutable way, array copying is required. You need a new data structure because you cannot change  Common state action is to add or remove items from an array or to add or remove fields from an object. However, the standard operations are mutating the original object. Let’s see how we can apply them in an immutable way. Our goal is to create a new object, rather than changing the existing.

When you are using filter it iterates all cycle -> one effective way is finding index => slice and using splitter ...

const index = state.findIndex(data => data.id === action.id);

return [...state.slice(0, index), ...state.slice(index + 1)];

how to use immutability-helper remove elements from array · Issue , filter(item => item != 7), }) // Delete a value (7) if found, first occurrence only const index  Immutable([1,2,3]).concat([4]) The Object and Array methods that do not mutate are still available, although they return Immutable instances instead of normal arrays and objects. The non-mutating array methods seamless-immutable supports are map, filter, slice, concat, reduce, and reduceRight, and for objects just keys. Does that help? —

Alternatively, as you are "searching and then deleting"...

var itemIndex = this.state.get("tracks").findIndex(x => x.get('id') === 'a2');

return itemIndex > -1 ? this.state.deleteIn(["tracks", itemIndex]) : this.state;

This will ensure the state is not mutated when there are no changes.

How to remove an item from an Array in JavaScript, JavaScript offers many ways to remove an item from an array. Learn the canonical way, and also find out all the options you have, using plain  If you modify the internals of an object or array – by changing a property, or pushing a new item, or even modifying an item inside an array – then the object or array is referentially equal to its old self, and a PureComponent will not notice that it has changed, and will not re-render. Weird rendering bugs will ensue.

Found this thread while looking for a solution to a similar task. Solved it with update method:

return state.update('things', (things) => things.filter((t) => t.id !== action.things.id))

any idea/comment which one is better/preferred?

Immutable Update Patterns, Doing a shallow copy of the top level is not sufficient - the nestedState object should be copied as well. #Inserting and Removing Items in Arrays. Normally, a  Be careful when you use delete for an array. It is good for deleting attributes of objects, but not so good for arrays. It is better to use splice for arrays. Keep in mind that when you use delete for an array you could get wrong results for anArray.length.

You can do that even without immutable.js with following function.

function arrayFilter(array, filter) {
  let ret = array
  let removed = 0
  for (let index = 0; index < array.length; index++) {
    const passed = filter(array[index], index, array)
    if (!passed) {
      ret = [...ret.slice(0, index - removed), ...ret.slice(index - removed + 1)]
      removed++
    }
  }
  return ret
}

All about Immutable Arrays and Objects in JavaScript, Removal and inserting of items. To add or remove an item from an array, we usually use splice . const fruits  final String[] IMMUTABLE = new String[0]; Arrays with 0 elements (obviously) cannot be mutated. This can actually come in handy if you are using the List.toArray method to convert a List to an array. Since even an empty array takes up some memory, you can save that memory allocation by creating a constant empty array, and always passing it to the toArray method.

Best practices to keep objects and arrays immutable in javascript , data structures. Tagged with javascript, immutability, arrays, objects. Removing an element from an array. const itemToRemove = 3; const  You can use the splice method on an array to remove the elements. for example if you have an array with the name arr use the following: arr.splice(2,1); so here the element with index 2 will be the starting point and the argument 2 will determine how many elements to be deleted. If you want to delete the last element of the array named arr then do this:

Immutable Update Patters in JavaScript: Update Objects and Arrays , In this short post, well look at pure JS ways to, add, remove, and update deeply nested properties in Objects, Arrays. Gufran Mirza. Follow. #Immutable Update Patterns. The articles listed in Prerequisite Concepts#Immutable Data Management give a number of good examples for how to perform basic update operations immutably, such as updating a field in an object or adding an item to the end of an array.

Redux : Remove an Item from an Array challenge help, const immutableReducer = (state = [0,1,2,3,4,5], action) => { switch(action.type) { case 'REMOVE_ITEM': const newState = state.filter( val => val  Immutable objects are objects that don't change. You make them, then you can't change them. Instead, if you want to change an immutable object, you must clone it and change the clone while you are creating it. A Java immutable object must have all its fields be internal, private final fields. It must not implement any setters.

Comments
  • state.update('things', things => things.filter(thing => thing.get('id') !== 'a2'));
  • So simple - I was apparently trying too hard to use Immutable's methods :) Thanks!
  • There's one caveat, this would always return a new immutable, even when the array has no matching elements. Depending on the size of the structure, this may be something worth knowing as it will effectively defeat any rendering optimizations done based on immutable state comparisons in React.
  • i am getting o.get is not a function... any help!!
  • I LOOOOOOOOVE this!!! way easier than looping through and splicing , never again shall I do that.
  • I think this is wrong. Shouldn't it be setIn and getIn. ie. state.setIn('things', state.getIn('things').filter(o => o.get('id') !== 'a1'));