[signalStore] Lazy start store

[rosostolato]

Is there a way to give the initial state in the component ngOnInit hook?

// workspace.store.ts
export interface WorkspaceState {
  workspace: Workspace;
}

export const WorkspaceStore = signalStore(
  withState<WorkspaceState>(), // don't provide the initial state here
  withComputed(({ workspace }) => ({
    // it won't compute until you give the initial state later in the component
    ...
  }),
  ...
)

// workspace-tab.component.ts
@Component({
  selector: 'app-workspace-tab',
  standalone: true,
  imports: [],
  providers: [WorkspaceStore],
  templateUrl: './workspace-tab.component.html',
  styleUrl: './workspace-tab.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WorkspaceTabComponent implements  OnInit {
  @Input({ required: true }) workspace: Workspace;

  readonly workspaceStore = inject(WorkspaceStore );

  ngOnInit(): void {
    // start the signal store here
    patchState(this.workspaceStore, { workspace: this.workspace });
  }
}

[markostanimirovic]

Unfortunately, this is not possible because signals do not support lazy initialization.

[rosostolato]

Can't we wait before we call the withComputed feature function? I know it uses the injection context, but we can run them with angular runInInjectionContext.

[rosostolato]

And there's no way to create the store signals async?

[rainerhahnekamp]

What is the purpose of that? Do you need to fetch the initialState from backend? If you can give us more hints, we might come up with a solution that works for you.

[rosostolato]

Kind of. The initial state comes from the component input just like the the example I wrote. So at the first moment, the state is null and I didn't want to declare the interface prop as Workspace | null. But signals are not like observables that can skip a value emission and return later, they work sync and not async. So, anyway, at the moment I call the store signal it will return what it has at that time, which will be null until the component receives the input. I believe there's no workaround for it.

[rainerhahnekamp]

Not an easy one. You could try to run withStore delayed and in the InjectionContext but it look quite ugly to be honest.

[rosostolato]

Yes, but it's probably not worth it.