这是使用 redux 删除项目的正确方法吗？

javascript reactjs redux

2022-08-30 04:13:03

我知道我不应该改变输入，应该克隆对象来改变它。我遵循了在redux初学者项目上使用的约定，该项目使用：

ADD_ITEM: (state, action) => ({
  ...state,
  items: [...state.items, action.payload.value],
  lastUpdated: action.payload.date
})

用于添加项目 - 我使用 spread 在数组中追加项目。

用于删除我使用：

DELETE_ITEM: (state, action) => ({
  ...state,
  items: [...state.items.splice(0, action.payload), ...state.items.splice(1)],
  lastUpdated: Date.now() 
})

但这是在改变输入状态对象 - 即使我返回一个新对象，这是否是被禁止的？

答案 1

不。永远不要改变你的状态。

即使你返回了一个新对象，你仍然污染了旧对象，你永远不想这样做。这使得在对旧状态和新状态进行比较时存在问题。例如，react-redux 在引擎盖下使用。它还使时间旅行变得不可能（即撤消和重做）。shouldComponentUpdate

请改用不可变方法。始终使用，从不使用。Array#sliceArray#splice

我从您的代码中假设这是要删除的项的索引。更好的方法如下：action.payload

items: [
    ...state.items.slice(0, action.payload),
    ...state.items.slice(action.payload + 1)
],

答案 2

可以使用数组筛选器方法从数组中删除特定元素，而不会改变原始状态。

return state.filter(element => element !== action.payload);

在代码的上下文中，它看起来像这样：

DELETE_ITEM: (state, action) => ({
  ...state,
  items: state.items.filter(item => item !== action.payload),
  lastUpdated: Date.now() 
})