Redux状态数组删除元素失效：使用filter后状态未更新如何解决？

你尝试通过对比ID移除_state数组中的元素，但调用removeBook action后，store中的数据没有任何变化，问题出在以下几个地方：

错误点梳理 #

1. action名称语法错误：book.removeBook.多了一个末尾的点，应改为book.removeBook
2. filter条件不匹配：
   • onRemove中传递给action的是书籍ID字符串，但reducer里的filter回调把数组项的id和book参数（实际是ID字符串）对比时，逻辑不对应
   • 回调参数命名误导：(id) => ...里的id其实是数组中的每一个书籍对象，建议改为item这类清晰命名
3. 冗余的空数组兜底：filter方法本身返回数组，无匹配项时自动返回空数组，无需|| []
4. retrievedBook的潜在问题：若initialState是数组类型，retrievedBook直接返回单个book对象会把_state从数组变为对象，后续调用filter会因对象无该方法报错

修复后的代码 #

Reducer部分 #

export const bookReducer = createReducer(
  initialState, // 原代码的initialCtion应为initialState笔误
  on(book.retrievedBook, (_state, { book }) => {
    // 根据业务需求调整：如果是初始化/覆盖数组，返回数组格式；如果是追加则用展开语法
    return Array.isArray(book) ? book : [book];
  }),
  on(book.removeBook, (_state, { book: targetId }) => 
    _state.filter(item => item.id !== targetId)
  )
);

调用部分 #

onRemove(_book: Book){
  const bookId = _book.id;
  this.store.dispatch(ApiBooks.removeBook({ book: bookId }));
}

关键说明 #

• 确保initialState为数组类型，比如const initialState: Book[] = []
• reducer必须始终返回与初始状态同类型的值，避免数组、对象类型互转引发的方法调用错误
• 对比ID时建议使用严格不等!==，避免隐式类型转换导致的意外匹配

内容的提问来源于stack exchange，提问作者Alex Rodriguez