Delete an element from array using redux

Question

I am trying to make a todo app using redux and I'm stack on how to delete a todo from the array.

reducer.js

export default function todo(state, action) {
switch (action.type) {
  case 'ADD_TODO':
    return [
      ...state,

      {
        id: action.id,
        text: action.text,
        completed: false
      }
  case 'REMOVE_TODO':
    return {
      id: action.id,
      ...state.slice(id, 1)
    }
  default:
    return state;
 }
}

action.js

let nextTodoId = 0
export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

export const removeTodo = id => {
  type: 'REMOVE_TODO',
  id
}

So far i can add and toggle a todo as completed or not. Thanks

Is the initialState an array of todos ?

Olivier Boissé
– Olivier Boissé

2018-08-20 08:46:01 +00:00
Commented Aug 20, 2018 at 8:46 — Olivier Boissé
– Olivier Boissé, Commented Aug 20, 2018 at 8:46
No, the initialState is an empty array.

PanosCool
– PanosCool

2018-08-20 08:48:09 +00:00
Commented Aug 20, 2018 at 8:48 — PanosCool
– PanosCool, Commented Aug 20, 2018 at 8:48
ok so the @Pavel answer is correct

Olivier Boissé
– Olivier Boissé

2018-08-20 08:54:41 +00:00
Commented Aug 20, 2018 at 8:54 — Olivier Boissé
– Olivier Boissé, Commented Aug 20, 2018 at 8:54

Pavlo Kozlov · Accepted Answer · 2018-08-20 08:41:31Z

7

Using redux you need to return all array elements except the removed one from reducer.

Personally, I prefer using the filter method of the Array. It'll return you a shallow copy of state array that matches particular condition.

case 'REMOVE_TODO':
return state.filter(({id}) => id !== action.id);

answered Aug 20, 2018 at 8:41

Pavlo Kozlov

1,1111 gold badge12 silver badges23 bronze badges

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

Comments

jsDevia · Accepted Answer · 2018-08-20 08:46:20Z

2

In react redux application, you should know, you always have to create a new object, to deleting an item please use spread operator like this :

return [...state.filter(a=>a.id !== id)]

answered Aug 20, 2018 at 8:46

jsDevia

1,2925 gold badges14 silver badges39 bronze badges

2 Comments

Pavlo Kozlov Over a year ago

You don't need to use spread operator since Array.prototype.filter method returns new array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Ravi Anand Over a year ago

The above is useful when you have to maintain the empty array after filtering/eliminating the last item.

Collectives™ on Stack Overflow

Delete an element from array using redux

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related