过滤减速器中的数组 - 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

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

所以,它!==不是===.你很亲密