Question

我是JavaScript和Redux的新手。我正在尝试在Redux的一个reducer中基于id过滤数组，如果我仅将id传递给回调函数，则该数组不起作用，但是如果id包裹在{id}周围，则它可以工作。

//Default store
const defaultState = {
  articles: [],
  filtercriteria: {}
};

//Reducer
const articlesReducer = (state = defaultState.articles, action) => {
  switch (action.type) {
    case "ADD":
      return [...state, action.article];
    case "REMOVE":
      //return state.filter(id => id !== action.id); //**DOES NOT WORK**
      return state.filter(({id}) => id !== action.id); // **WORKS**
    default:
      return state;
  }
  return state;
};

//Action Creator and Action
const remove = id => {
  return {
    type: "REMOVE",
    id
  };
};

//Action Dispatch
const addActionObject = store.dispatch(add());
store.dispatch(remove(addActionObject.article.id));

Answer 1

好吧，因为您正在使用destructuring

解构赋值语法是一个JavaScript表达式，使从数组解压缩值或从解压缩属性成为可能对象，分成不同的变量。

如果您不使用解构，则可以使用如下功能：

state.filter((item) => item.id !== action.id);

但是您可以使用解构将现有属性“ id”分配给不同的变量

state.filter(({ id }) => id !== action.id);

Answer 2

如果您希望它在没有括号的情况下工作，请执行以下操作：

return state.filter(obj => obj.id !== action.id);

以上Pointy的评论给出了其余的答案。编码愉快

Answer 3

Pointy是完全正确的。有一个销毁对象的地方。问题是您正在过滤一组对象（文章）。筛选器获取谓词函数，该谓词函数的第一个参数是数组的元素。

要简化版本，可以使用对象分解。另外，您可以像这样...filter(article => article.id !== action.id);

在这里您可以阅读有关Hibernate 5 Event Listener Example的更多信息。这里是object destructuring的文档。

Answer 4

您将状态设置为等于商品，即商品的数组。因此，当您编写{id}时，实际上是在破坏要传递的对象，然后将其ID存储在id变量中。如果您不想将其用大括号括起来，则可以执行以下操作：

return state.filter((article) => article.id !== action.id);

array.filter参数只有在{}周围时才有效

4 个答案: