如何解决reducer删除数组元素时报Cannot delete property '0' of [object Array]错误

• Redux/NgRx 体系的 reducer 严格要求状态不可变，框架会默认冻结传入的状态对象，禁止直接修改原状态。splice 是数组原地修改方法，操作被冻结的数组时就会抛出「无法删除属性」的类型错误。
• 另外 splice 的返回值是被删除的元素组成的数组，而非删除元素后的完整数组，即使没有冻结限制，返回的结果也不符合业务预期。

两种符合不可变原则的实现方式可选：

方案1：用filter直接过滤（更简洁） #

filter 会返回全新的数组，完全不会修改原状态，同时省略了手动查找索引的步骤：

on(deleteAnswerAction, (s, { answerId }) => {
  return s.filter((item) => item.id !== answerId);
}),

方案2：查找索引后拼接新数组 #

如果业务需要先校验索引是否存在再执行删除，可以手动拼接新数组，避免修改原状态：

on(deleteAnswerAction, (s, { answerId }) => {
  const findAnswerIndex = s.findIndex((item) => item.id === answerId);
  // 找不到对应索引时直接返回原状态，避免无意义的状态更新
  if (findAnswerIndex === -1) return s;
  // 切片拼接生成新数组
  return [...s.slice(0, findAnswerIndex), ...s.slice(findAnswerIndex + 1)];
}),

内容的提问来源于stack exchange，提问作者Zahid M Shaikh