Is this the correct way to delete an item using redux?

Question

I know I'm not supposed to mutate the input and should clone the object to mutate it. I was following the convention used on a redux starter project which used:

ADD_ITEM: (state, action) => ({
  ...state,
  items: [...state.items, action.payload.value],
  lastUpdated: action.payload.date
})

for adding an item - I get the use of spread to append the item in the array.

for deleting I used:

DELETE_ITEM: (state, action) => ({
  ...state,
  items: [...state.items.splice(0, action.payload), ...state.items.splice(1)],
  lastUpdated: Date.now() 
})

but this is mutating the input state object - is this forbidden even though I am returning a new object?

Anastomosis

Quick question. Splice returns the items that you removed. Is that your intention? If not you should be using slice, which also abides by the no mutations law. – Abad

Well in this example I'm splicing the two sections of the array together into a new array - with the item I wanted to remove left out. Slice also returns the removed item right? Only it does so without mutating the original array so that would be the better approach? – Anastomosis

@AR7 as per your suggestion: items: [...state.items.slice(0, action.payload.value), ...state.items.slice(action.payload.value + 1 )] using slice now instead of splice so as to not mutate the input - is this the way to go or is there a more concise way? – Anastomosis

Answer 1

No. Never mutate your state.

Even though you're returning a new object, you're still polluting the old object, which you never want to do. This makes it problematic when doing comparisons between the old and the new state. For instance in shouldComponentUpdate which react-redux uses under the hood. It also makes time travel impossible (i.e. undo and redo).

Instead, use immutable methods. Always use Array#slice and never Array#splice.

I assume from your code that action.payload is the index of the item being removed. A better way would be as follows:

items: [
    ...state.items.slice(0, action.payload),
    ...state.items.slice(action.payload + 1)
],

Lupelupee

this doesn't work if we're dealing with the last element in the array, also the use of ... in the second statement will double the content of your state – Battology

Please prove that with a jsfiddle/codepen example. The snippet arr.slice(arr.length) should always produce an empty array no matter what the contents of arr. – Lupelupee

@david-l-walsh sorry for the confusion, I must've made a typo or something when testing this example. It works wonders. My only question is: why the need of the spread operator ... in the second part - ...state.items.slice(action.payload + 1) – Battology

Array#slice returns an array. To combine the two slices into a single array, I've used the spread operator. Without it, you would have an array of arrays. – Lupelupee

that makes sense. Thank you very much for clarifying (and sorry for the confusion at first). – Battology

Answer 2

You can use the array filter method to remove a specific element from an array without mutating the original state.

return state.filter(element => element !== action.payload);

In the context of your code, it would look something like this:

DELETE_ITEM: (state, action) => ({
  ...state,
  items: state.items.filter(item => item !== action.payload),
  lastUpdated: Date.now() 
})

Ginoginsberg

Does the filter produce a new array? – Leyva

@Leyva Yes, the Array.filter method returns a new array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Ginoginsberg

Note that if there are duplicates, this will remove ALL of them. To use filter to remove a specific index, you can use e.g. arr.filter((val, i) => i !== action.payload ) – Tarweed

Answer 3

The ES6 Array.prototype.filter method returns a new array with the items that match the criteria. Therefore, in the context of the original question, this would be:

DELETE_ITEM: (state, action) => ({
  ...state,
  items: state.items.filter(item => action.payload !== item),
  lastUpdated: Date.now() 
})

Argol

.filter() is not an ES2015 method, but has been added in the prior version ES5. – Crib

Answer 4

Another one variation of the immutable "DELETED" reducer for the array with objects:

const index = state.map(item => item.name).indexOf(action.name);
const stateTemp = [
  ...state.slice(0, index),
  ...state.slice(index + 1)
];
return stateTemp;

Tyrothricin

Answer 5

Deleting an item using redux in different ways.

Method 1: In that case is used createSlice( .. )

const { id } = action.payload; // destruct id
removeCart: (state, action) =>{
                 let { id } = action.payload;
                 let arr = state.carts.filter(item => item.id !== parseInt(id))
                 state.carts = arr;
               }

Method 2: In that case is used switch (... ), spread-operator

const { id } = action.payload; // destruct id

case actionTypes.DELETE_CART:  
     return {
        ...state,
        carts: state.carts.filter((item) => item.id !== payload)
      };

For both methods initialized this state:

  initialState: {
      carts: ProductData, // in productData mocked somedata     
    }

Deanedeaner

Answer 6

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.

In this scenario we are trying 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.

Here is an example of how to delete a nested object:

// ducks/outfits (Parent)

// types
export const NAME = `@outfitsData`;
export const REMOVE_FILTER = `${NAME}/REMOVE_FILTER`;

// initialization
const initialState = {
  isInitiallyLoaded: false,
  outfits: ['Outfit.1', 'Outfit.2'],
  filters: {
    brand: [],
    colour: [],
  },
  error: '',
};

// action creators
export function removeFilter({ field, index }) {
  return {
    type: REMOVE_FILTER,
    field,
    index,
  };
}

export default function reducer(state = initialState, action = {}) {
  sswitch (action.type) {  
  case REMOVE_FILTER:
  return {
    ...state,
    filters: {
    ...state.filters,
       [action.field]: [...state.filters[action.field]]
       .filter((x, index) => index !== action.index)
    },
  };
  default:
     return state;
  }
}

To understand this better, make sure to check out this article: https://medium.com/better-programming/deleting-an-item-in-a-nested-redux-state-3de0cb3943da

Euchromosome

Answer 7

To immutably / functionally remove the element at index from an array:

items: [
    ...items.slice(0, index),
    ...items.slice(index + 1)
]

Or simpler (and possibly faster):

items: items.filter((_, i) => i !== index)

Angelo

Answer 8

Besides the state mutation question, that already has been answered, I'd like to note the new possible ways to operate immutably on arrays with the new array methods added in ES2023:

DELETE_ITEMS: (state, action) => ({
  ...state,
  items: state.items.toSpliced(action.payload.index, action.payload.deleteCount),
})

UPDATE_ITEM: (state, action) => ({
  ...state,
  items: state.items.with(action.payload.index, action.payload.newItem),
})

Also you could do much more complicated operations using toSpliced, since you can add items to be inserted in the index provided as first argument.

Chalcedony