@ngrx/signals : allow lazy patching the state

[diicar]

Which @ngrx/* package(s) are relevant/related to the feature request?

signals

Information

While patching the state create signals if not present.

@see : https://github.com/ngrx/platform/blob/20.0.0-beta.0/modules/signals/src/state-source.ts#L83

Thanks

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[markostanimirovic]

Hi @diicar,

Can you provide more details? What use case do you have that cannot be solved with the current implementation?

[diicar]

Hi @markostanimirovic,

I'm currently on a POC where I have a container state which contains a lot of properties.

type State = {
  type: 'STAGE_1',
  propA: number;
  propG: {};
} | {
  type: 'STAGE_2',
  propB: number;
  propX: {};
}

withState<State >({
    type: null!,
  }),

The initial state is based on a backend service.

httpClient.get<State>('/api/...').pipe(.
  tap(resp => patchState(state, resp))
)

container.html

@if (store.type() === 'STAGE_1') {
  // here I know that  propA & propG are present
 @defer {
  <child-comp-a [propA]="store.propA()" />
  <child-comp-g [propG]="store.propG()" />
 }
} @else if (store.type() === 'STAGE_2') {
  // here I know that  propB & propX are present
  @defer {
  <child-comp-b [propB]="store.propB()" />
  <child-comp-x [propX]="store.propX()" />
 }
} else if (....) {
} else if (....) {
}
// Now we can imagine that we have a lot possible states.

I hope this is more clear :)
Thanks

[markostanimirovic]

To make it work, you can add a nested state property as follows:

type Stage = {
  type: 'INIT';
} | {
  type: 'STAGE_1';
  propA: number;
  propG: {};
} | {
  type: 'STAGE_2';
  propB: number;
  propX: {};
}

const Store = signalStore(
  withState({ stage: { type: 'INIT' } }),
  withMethods((store) => ({
    setStage(stage: Stage): void {
      patchState(store, { stage });
    },
  })),
);