NgRx SignalStore：如何使用withEntities初始化初始状态？

我正在使用NgRx SignalStore及withEntities特性，默认情况下该特性会在存储中创建空的项目集合，但我希望用一个项目数组初始化存储。这一点在官方文档中未被提及。我原本以为在withEntities之后使用withState可以实现，但尝试以下代码后，存储初始化完成后entities()信号仍为空的ToDo数组：

interface ToDo { id: string; name: string; isDone: boolean; }

export const ToDoStore = signalStore(
  withEntities<ToDo>(),
  withState<EntityState<ToDo>>(() => {
    return {
       entityMap: {
          abc: { id: 'abc', name: 'Some Todo', isDone: false }
       },
       ids: ['abc']
    }
  })
)

解决方案 #

问题核心是withEntities内部独立维护实体状态，直接用withState覆盖状态无法被其衍生信号识别，以下两种方法可以解决：

方法1：通过withEntities的初始配置参数直接初始化

withEntities支持传入initialEntities参数，直接指定初始实体数组：

interface ToDo { id: string; name: string; isDone: boolean; }

export const ToDoStore = signalStore(
  withEntities<ToDo>({
    initialEntities: [
      { id: 'abc', name: 'Some Todo', isDone: false }
    ]
  })
);

方法2：注入Store后调用addEntities方法初始化

如果初始数据需要动态获取（比如从API请求），可以在组件或服务中注入Store后调用addEntities：

// 在组件或服务中
const todoStore = inject(ToDoStore);
// 可替换为API请求后的数据
todoStore.addEntities([{ id: 'abc', name: 'Some Todo', isDone: false }]);

原代码失效原因 #

withEntities会创建专属的内部状态片段，entities()信号是基于这个内部状态计算衍生的。你用withState直接覆盖整个EntityState，并没有更新withEntities内部维护的状态实例，因此entities()仍然返回空数组。

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