NgRx Store状态增删改问题：Reducer中_state关联异常排查

核心问题 #

1. 动作类型定义错误：获取书籍的动作中，book的类型被错误定义为二维数组Array<Book[]>，导致reducer接收的state变成二维结构，后续删除操作无法正确遍历。
2. Reducer语法错误：book.removeBook.多了一个多余的点，导致动作绑定失败；删除逻辑中字段名与动作传递的参数不匹配，且遍历逻辑错误。
3. 状态更新逻辑不统一：第一个reducer直接替换state，但未确保类型一致性，导致后续操作时state可能非预期结构。

修正后的动作文件代码 #

export const ApiBooks = createActionGroup({
  source: 'Book API',
  events: { 
    'Retrieved book': props<{ book: Book[] }>(),
    'Remove Book': props<{ bookId: string }>()
  },
});

• 修正了book的类型为一维数组Book[]，符合书籍列表的实际结构。
• 将删除动作的参数名改为bookId，明确传递的是书籍ID，避免与书籍对象混淆。

修正后的Reducer代码 #

// 确保initialBook是一个空数组，作为初始状态
const initialBook: Book[] = [];

export const bookReducer = createReducer(
  initialBook,
  // 直接返回获取到的书籍列表，确保state始终是一维数组
  on(ApiBooks.retrievedBook, (_state, { book }) => book),
  // 过滤掉ID匹配的书籍，确保返回始终是数组（即使过滤后为空）
  on(ApiBooks.removeBook, (_state, { bookId }) => _state.filter(item => item.id !== bookId))
);

• 修正了book.removeBook.的语法错误，改为正确的动作引用ApiBooks.removeBook。
• 删除逻辑中使用bookId匹配书籍ID，遍历每个书籍对象（item）而非错误的id变量。
• 移除了多余的|| []，因为filter方法本身就会返回数组，即使结果为空也不会是undefined。

额外注意事项 #

• 确保Book类型定义中包含id字段，类型为string，与删除动作传递的bookId类型一致。
• 调用删除动作时，需传递书籍的ID字符串，而非整个书籍对象。

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