Delete an item from Redux state

ngrx remove item from store
react remove item from state
redux nested state
removing redux
how to create redux store
add data to redux store
save data in redux store
es6 remove item from array immutable

I'm wondering if you could help me with this problem if possible. I am trying to delete an item from the Redux state. I have passed in the ID of the item that the user clicks via action.data into the reducer.

I'm wondering how I can match the action.data with one of the ID's within the Redux state and then remove that object from the array? I am also wondering the best way to then set the new state after the individual object has been removed?

Please see the code below:

export const commentList = (state, action) => {
  switch (action.type) {
    case 'ADD_COMMENT':
      let newComment = { comment: action.data, id: +new Date };
      return state.concat([newComment]);
    case 'DELETE_COMMENT':
      let commentId = action.data;

    default:
      return state || [];
  }
}

Just filter the comments:

case 'DELETE_COMMENT':
  const commentId = action.data;
  return state.filter(comment => comment.id !== commentId);

This way you won't mutate the original state array, but return a new array without the element, which had the id commentId.

To be more concise:

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

How to Delete an Item in a Nested Object in Redux State, 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  Use Case: Deleting an Item in a Nested Object in Redux State Let’s imagine we have a fashion ecommerce application with the following initial state. The state tree is simple and includes a few

You can use Object.assign(target, ...sources) and spread all the items that don't match the action id

case "REMOVE_ITEM": {
  return Object.assign({}, state, {
    items: [...state.items.filter(item => item.id !== action.id)],
  });
}

Adding and Removing items from Redux store - Rafael Cruz, Removing items from the redux store. I will be using the same react application I have used in my previous two blogs, but I added three additional  Redux: Remove an Item from an Array Redux: Remove an Item from an Array Time to practice removing items from an array. The spread operator can be used here as well. Other useful JavaScript methods include slice() and concat(). The reducer and action creator were modified to remove an item from an array based on the index of the item.

You can use Try this approach.

case "REMOVE_ITEM": 
  return {
  ...state,
    comment: [state.comments.filter(comment => comment.id !== action.id)]
  }

Redux Delete, Instead, we use the Redux pattern to have our store hold and update our state, and when this delete button is clicked, the value of props.text is passed into our​  I am trying to learn redux but I am stuck in this concept on how do i properly use the deleteCar that i have in actions. The reducer works well but the problem is at the global state of cars, how c

Simple Redux Create Delete Contact Application, Step 6: Make one reducer inside reducers folder. Reducers are used to update the state object in your store. Just like actions, your application can have multiple​  Yes, the delete statement is mutating the previous state. You'll probably find this breaks time travel/undo/redo, which are core benefits of Redux to be ignored at your own peril! You'll probably find this breaks time travel/undo/redo, which are core benefits of Redux to be ignored at your own peril!

Redux : Remove an Item from an Array challenge help, index ); return newState; default: return state; } }; const removeItem = (index) => { return { type: 'REMOVE_ITEM', index } } const store = Redux. Simple Redux Create Delete Contact Application is today’s small project. We will use ReactJS as a frontend. We are not using any backend in this tutorial, so a just client-side application. Redux is the most famous library to manage the state at the client side, and it is trendy among React community. We will build a Simple Contact Create

React + Redux Tutorial Part VIII: The Delete Feature, React + Redux Tutorial Part VIII: The Delete Feature return [ state.filter(cat => cat.id !== action.cat.id), Object.assign({}, action.cat) ] case  To delete the todo items, first pass a function from parent component: <TodoList todos={this.state.todos} removeTodo={this.removeTodo}/> Bind this function in the constructor: this.removeTodo = this.removeTodo.bind(this); Define this function in parent component, it will delete that item from state variable:

Comments
  • I saw another example which used just id, as opposed to your answer ({ id }). what is the different here?
  • @MattSaunders ({ id }) => ... is a lambda expression (arrow function in js terms), which destructures it's argument. Meaning the input should be an object, and we are only interested in it's id property. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
  • What to do if it was I had change an object within array that is within in the array of objects. lists: [{name: 'xyz', cards: [{...}]}...many more lists]
  • the spread operator is a ES6 syntax feature. I'm not sure why you're using Object.assign in this example alongside it.