web-dev-qa-db-ja.com

Redux状態からアイテムを削除する

可能であれば、この問題で私を助けてくれないかと思っています。 Redux状態からアイテムを削除しようとしています。ユーザーがaction.dataを介してクリックするアイテムのIDをリデューサーに渡しました。

action.dataをRedux状態内のIDの1つと照合し、そのオブジェクトを配列から削除する方法を疑問に思っていますか？また、個々のオブジェクトが削除された後に新しい状態を設定する最良の方法を疑問に思っていますか？

以下のコードをご覧ください：

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

コメントをフィルタリングするだけです：

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);
56
Balázs Édes

Object.assign(target, ...sources)を使用して、アクションIDと一致しないすべてのアイテムを展開できます

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