从Redux状态中删除一个项目

Question

如果可能的话，我想知道您是否能帮助我解决这个问题。我正在尝试从Redux状态中删除一个项目。我已经通过action.data将用户点击的项目的ID传递到reducer中。

我想知道如何将action.data与Redux状态中的ID之一进行匹配，然后从数组中删除该对象？我还想知道在删除单个对象后最好的设置新状态的方法是什么？

请参见下面的代码：

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 || [];
  }
}

- user5604758

Answer 1

只需过滤评论：

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

这种方法可以避免改变原始的state数组，而是返回一个新的数组，不包含id为commentId的元素。

更简洁地说：

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

- Balázs Édes

---

我看到另一个例子只使用了id，而不是你的答案({ id })。这里有什么不同？ - Matt Saunders

@MattSaunders ({ id }) => ... 是一个 lambda 表达式（JavaScript 中的箭头函数），它对其参数进行解构。这意味着输入应该是一个对象，我们只关心它的 id 属性。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment - Balázs Édes

如果我需要更改一个对象，而该对象位于对象数组的数组中，应该怎么办？lists: [{name: 'xyz', cards: [{...}]}...many more lists] - Koushik Das

.filter()不是返回一个新的数组吗？因此重新分配整个应用程序的状态？ - Shah

@Shah这就是redux的重点。每次调用reducer时，您都会返回一个新状态，而不是改变现有状态。筛选器不会克隆数组中的内容，只会克隆数组结构本身。因此，如果数组中有复杂对象，则会保持不变，只是放在一个新数组中。 - Balázs Édes

我的错误，我没有意识到 .filter() 是一个浅拷贝。 - Shah

Answer 2

您可以使用Object.assign(target, ...sources)并展开所有不匹配操作ID的项。

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

- Zakher Masri

---

展开运算符是 ES6 语法功能。我不确定为什么在这个例子中你要和它一起使用 Object.assign。 - Futureproof

Answer 3

对于状态设置为对象而不是数组的任何人：

我使用reduce()而不是filter()来展示另一种实现。但当然，你可以选择如何实现它。

/*
//Implementation of the actions used:

export const addArticle = payload => {
    return { type: ADD_ARTICLE, payload };
};
export const deleteArticle = id => {
     return { type: DELETE_ARTICLE, id}
*/

export const commentList = (state, action) => {
  switch (action.type) {
    case ADD_ARTICLE:
        return {
            ...state,
            articles: [...state.articles, action.payload]
        };
    case DELETE_ARTICLE: 
        return {
            ...state,
            articles: state.articles.reduce((accum, curr) => {
                if (curr.id !== action.id) {
                    return {...accum, curr};
                } 
                return accum;
            }, {}), 
        }

- Shah

Answer 4

您可以尝试这种方法。

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

- ispirett

Answer 5

在我的情况下，过滤器可以不使用()和{}，并且状态会被更新。

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

- Javier Ramírez