在 Reducer 中过滤数组 - Redux

Question

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

写成这样不是更好吗：

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

我想了一下 filter 可能会修改状态和 return 同一个数组，但根据 MDN 它会创建一个新数组。

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

Answer 1

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

因此，它是 !== 而不是 ===。你很接近。

在 Reducer 中过滤数组 - Redux

Filtering Arrays in a Reducer - Redux

javascript

reactjs

redux

react-redux