Javascript 从Redux状态删除项目

如果可能的话，我想知道你是否能帮我解决这个问题。我正在尝试从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 || [];
  }
}

---

只需过滤评论：

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

这样，您就不会改变原始的

状态

数组，而是返回一个没有元素的新数组，该数组的id为

commentId

简而言之：

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

---

您可以使用

Object.assign（target，…sources）

并分散所有与操作id不匹配的项

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

---

您可以使用并尝试这种方法

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

---

在我的例子中，过滤器在没有（）和{}的情况下工作，状态被更新

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

---

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

我使用reduce（）而不是filter（）来显示另一个实现。但是ofc，如何实现它取决于你自己

/*
//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;
            }, {}), 
        }

---

我看到另一个例子，它只使用id，而不是您的答案（{id}）。这里有什么不同？@MattSaunders

（{id}）=>…

是一个lambda表达式（js术语中的箭头函数），它分解了它的参数。这意味着输入应该是一个对象，我们只对它的

id

属性感兴趣。如果我在数组中更改了一个对象，而该对象在对象数组中，该怎么办<代码>列表：[{name:'xyz'，卡片：[{…}]}…更多列表]不会返回新数组，因此会重新分配应用程序的整个状态？@Shah这就是redux的重点。每次调用reducer时都返回一个新状态，而不是改变现有状态。过滤器不会克隆阵列内部的内容，只克隆阵列结构本身。因此，如果数组中有复杂对象，它们将保持不变，只需放入一个新数组中即可。扩展运算符是ES6语法特性。我不确定您为什么在本例中使用Object.assign与它一起使用。