ngrx/SignalStore factory clarification

[nphias]

so i am creating a factory service for "lightweight" signal stores.
each store has unique domain logic so each attached to its own component provider. domain entities are only known at runtime via a websocket.

As runtime creation of components is frowned upon in the angular community .. not to mention the hacky code involved.
My approach therefore is to predefine a max pool of 12 components each with a signal store and lazy route load the components at runtime as needed.

I am using a provider factory service with my domain logic so i can than add the initialState for the store when its created.
The problem i am finding is that i don't know how to inject initial state into the store while its created..
The way i am doing it, is first create the store then call a function to patch the state with the initialization data. I guess this is ok..
it doesn't feel great.
eg:
i type the store using:

export const ProfileStore = signalStore(.... 
export type ProfileStore = InstanceType<typeof ProfileStore>;

and then in my Storefactory when called by the component provider useFactory (addInitialState is under withMethods)

getStore(type,url) {
  ....
  const store =  new ProfileStore()
  store.addInitialState(domain_logic_mapped_to_URL_segment)
  return store
}

would be great if i could do :
return new ProfileStore({initialState: domain_logic_mapped_to_URL_segment})

suggestions welcome to this approach

[nphias]

TDLR; of above : how do you inject initial state into stores? .. if its not possible , why not?..
( i want my storefactory to inject domain logic, instead of using the store oninit withhook)
@rainerhahnekamp
someone else?

[nphias]

HI thanks , but that doesnt seem to work for me .. my factory is in the class that instantiates the stores.. any other ideas?

[rainerhahnekamp]

@nphias might be an interesting task for a PR. But I think Marko should decide first if that would have a real chance to get merged (if it is actually possible)

[markostanimirovic]

To consider a feature request, it's necessary to provide a (real-world) use case that proves the limitation or bad DX of the existing APIs in its implementation.

In other words, this:

export const ProfileStore = signalStore(.... 
export type ProfileStore = InstanceType<typeof ProfileStore>;

getStore(type,url) {
  ....
  const store =  new ProfileStore()
  store.addInitialState(domain_logic_mapped_to_URL_segment)
  return store
}

is not enough. Maybe there is a different (or better) way to achieve the same behavior with existing APIs. To understand this, we need a broader context and a detailed explanation of what needs to be achieved.

@nphias It would be great if you could create a project that shows what's needed for your app.

Based on your description:

The problem i am finding is that i don't know how to inject initial state into the store while its created..

It seems that using the initial state factory could be a solution.

export const MyStore = signalStore(withState(initialStateFactory));

function initialStateFactory() {
  // inject activated route or any other service/token to determine the initial state
  const route = inject(ActivatedRoute);
  const initialState = /* get URL segment from route or do something else to define the initial state */;

  return initialState;
}

But again, we need to fully understand the problem.

[nphias]

Thanks for the replies .. yes it is a DX issue. I am finding really hard to wrap my head around this.. I want to do things with classes using composability and segregation of concerns.. the functional approach is challenging for me. Using ngrx component store was a little easier in that regard. Its not a showstopper i can still patchstate after creating the store and before returning it to the component.

component:

  providers:[{
    provide:ProfileStore,
    useFactory: (storeService:StoreFactoryService) => {return storeService.getStore("profile")},
    deps:[StoreFactoryService]
  }],

if would be great if i could create a store instance using :
new ProfileStore(withInitialState)
or
new ProfileStore(withState(state))

but there might be plenty of reasons why you wouldn't want to allow that.
keep up the good work

[ManuelRauber]

To consider a feature request, it's necessary to provide a (real-world) use case that proves the limitation or bad DX of the existing APIs in its implementation.

In other words, this:

export const ProfileStore = signalStore(.... 
export type ProfileStore = InstanceType<typeof ProfileStore>;

getStore(type,url) {
  ....
  const store =  new ProfileStore()
  store.addInitialState(domain_logic_mapped_to_URL_segment)
  return store
}

is not enough. Maybe there is a different (or better) way to achieve the same behavior with existing APIs. To understand this, we need a broader context and a detailed explanation of what needs to be achieved.

@nphias It would be great if you could create a project that shows what's needed for your app.

Based on your description:

The problem i am finding is that i don't know how to inject initial state into the store while its created..

It seems that using the initial state factory could be a solution.

export const MyStore = signalStore(withState(initialStateFactory));

function initialStateFactory() {
  // inject activated route or any other service/token to determine the initial state
  const route = inject(ActivatedRoute);
  const initialState = /* get URL segment from route or do something else to define the initial state */;

  return initialState;
}

But again, we need to fully understand the problem.

The initial state factory is a great thing, however it does not allow to use a Promise.

My use case is the following:

I'm building an Angular SSR application that can be used by several customers. The application is always the same it just gets configured differently depending on the customer viewing the app.

When the request hits the server, Angular SSR bootstraps the app. The app then makes a HTTP request to fetch the customer configuration for further things. Without this configuration the app cannot run.

In my case, the server cannot pre-fetch the data, because the app also needs to be able to run fully on the client-side, so with Angular SSR + fetching the configuration via HttpClient I can achieve both scenarios.

However, I want to put this configuration into a global store so it's available anywhere. In my case

1. either the application can bootstrap completely, then the store should be populated with the configuration from start (So I don't have to check for the existence of the configuration everytime I want to use it)
2. the application cannot bootstrap at all.

If the initial state factory would be Promise-based it would be perfect to implement my scenario.

At the moment, I'm using another service that gets the configuration, then I add this configuration to an InjectionToken which then gets injected into the initial state factory.