过滤减速器中的数组 - Redux

Question

在React教程之后，我在reducer中看到这段代码，用它的ID从数组中删除一条消息：

不会写得更好：

else if (action.type === 'DELETE_MESSAGE') { return { messages: [ ...state.messages.filter(m => m.id === action.id) ], }; };

我想了一下，filter可能会修改状态并返回相同的数组，但根据MDN，它会创建一个新数组。

我安全吗，我的实施是否正确？

Answer 1

是。这实际上是一个非常干净的解决方案。诀窍是，在Refer to the Documentation中，数组的每个元素都应用了一个接受多个参数的函数。返回布尔值时，这样的函数称为谓词。如果是Array#filter（实际上是Array.prototype的其他一些方法），则第二个参数是源数组中元素的索引。

所以，鉴于你知道索引，它只是

(state, action) => ({
  ...state,
  messages: state.messages.filter((item, index) => index !== action.index)
})

但是，你不知道索引。相反，您的值为id。在这种情况下，您是对的，您只需要针对此id过滤源数组，以仅放置值不等于目标的id的元素id：

(state, action) => ({
  ...state,
  messages: state.messages.filter(item => item.id !== action.id)
})

请注意：无需传播state.messages并将它们放回新阵列中。 Array#filter不会改变源数组，这很好。

所以，它是!==而不是===。你很亲密。