在 Reducer 中过滤数组 - Redux答案

【问题标题】：Filtering Arrays in a Reducer - Redux在 Reducer 中过滤数组 - Redux
【发布时间】：2016-12-22 06:16:52
【问题描述】：

按照 React 教程，我在 reducer 中看到了这段代码，用于使用其 ID 从数组中删除消息：

写成这样不是更好吗：

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

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

我安全吗？我的实现是否正确？

【问题讨论】：

看起来扩展运算符连接了两个数组。见repl.it/EvXg/1@Rajesh
不知道有没有性能方面的原因。使用大数组，切片方法会更快吗？
@Scimonster 这就是我的想法。我不明白他们的做法，似乎效率低下。

标签： javascript reactjs redux react-redux

【解决方案1】：

是的。这实际上是一个非常干净的解决方案。诀窍在于，在Array#filter 中，数组的每个元素都应用了一个接受多个参数的函数。这样的函数，当返回一个布尔值时，称为predicate。对于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 不会改变源数组，这很好。

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

【讨论】：