NgRx Signal Store状态更新异常：无法获取items列表

问题核心 #

通过addItem调用patchState已成功更新Store状态（控制台可见），但getAllItems和updateItemStatus始终返回空数组，导致无法更新项的状态。本质是未正确从SignalStore的状态信号中读取当前数据，或Store状态访问逻辑有误。

原因排查与修复方案 #

1. 检查Store状态定义与方法实现 #

确保Store正确使用状态回调更新，且方法正确暴露状态信号：

import { signalStore, withState, withMethods } from '@ngrx/signals';

interface TodoItem {
  id: string;
  title: string;
  status: 'todo' | 'in-progress' | 'done';
}

interface TodoState {
  items: TodoItem[];
}

const initialState: TodoState = { items: [] };

export const TodoStore = signalStore(
  withState(initialState),
  withMethods((store) => ({
    addItem: (item: TodoItem) => {
      // 使用状态回调获取当前最新状态
      store.patchState((current) => ({
        items: [...current.items, item]
      }));
    },
    // 直接返回状态信号，保持响应式
    getAllItems: () => store.items,
    updateItemStatus: (itemId: string, newStatus: typeof TodoItem['status']) => {
      // 基于当前状态更新，而非初始状态
      store.patchState((current) => ({
        items: current.items.map(item => 
          item.id === itemId ? {...item, status: newStatus} : item
        )
      }));
    }
  }))
);

2. 组件中正确访问Store数据 #

如果getAllItems返回的是信号，组件需通过()取值或直接在模板中使用：

import { Component, inject } from '@angular/core';
import { TodoStore } from './todo.store';

@Component({
  selector: 'app-to-do-card',
  template: `
    @for(item of allItems(); track item.id) {
      <!-- 渲染逻辑 -->
    }
  `
})
export class ToDoCardComponent {
  private todoStore = inject(TodoStore);
  allItems = this.todoStore.getAllItems();
}

3. 避免硬编码初始状态 #

错误示例（始终用初始空数组更新）：

// 错误写法
updateItemStatus: (itemId: string, newStatus: string) => {
  store.patchState({
    items: initialState.items.map(...)
  });
}

必须使用patchState的回调参数获取当前状态，确保基于最新数据更新。

4. 组件中正确获取新增后的项 #

在app-new-item中，调用addItem后直接通过store.items()获取最新值：

onAddItem(title: string) {
  const newItem = {
    id: Date.now().toString(),
    title,
    status: 'todo'
  };
  this.todoStore.addItem(newItem);
  this.itemAdded.emit(this.todoStore.items());
}

5. 确认Store注入正确性 #

确保组件注入的是全局Store实例，而非重复创建：

// 正确注入方式
private todoStore = inject(TodoStore);

总结 #

核心修复点是：

• 使用patchState的回调函数获取当前最新状态
• 正确暴露Store的状态信号，而非硬编码初始值
• 组件中通过响应式信号访问Store数据

内容的提问来源于stack exchange，提问作者Ingila Ejaz