从Redux状态删除项目

Bra*_*ley 21 javascript arrays reactjs redux

我想知道你是否可以帮我解决这个问题.我想从Redux状态删除一个项目.我已将用户点击的项目的ID传递action.data到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 || [];
  }
}
Run Code Online (Sandbox Code Playgroud)

Bal*_*des 66

只需过滤评论:

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

这样你就不会改变原始state数组,而是返回一个没有元素的新数组,该元素具有id commentId.

更简洁:

case 'DELETE_COMMENT':
  return state.filter(({ id }) => id !== action.data);
Run Code Online (Sandbox Code Playgroud)

  • @MattSaunders `({ id }) => ...` 是一个 lambda 表达式(js 术语中的箭头函数),它解构了它的参数。这意味着输入应该是一个对象,我们只对它的 `id` 属性感兴趣。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (2认同)

Zak*_*sri 6

您可以使用Object.assign(target, ...sources)和传播所有与操作 ID 不匹配的项目

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

  • 扩展运算符是 ES6 语法功能。我不确定你为什么在这个例子中使用 Object.assign 。 (3认同)