Make custom store feature as singleton

[BarakDabach]

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

signals

Information

It would be great if there was an ability to create a global(singleton) instance of a custom store feature,
Use case:
I have a global store that is been consumed in a number of component-stores(just a signal-store that is local to the component).
instead of injecting the global store in every one of them - i could just use WithGlobalStore() .
An example of usage would be:

export function withRequestStatus() {
  return signalStoreFeature(
   {providedIn:'root'},
    withState<RequestStatusState>({ requestStatus: 'idle' }),
    withComputed(({ requestStatus }) => ({
      isPending: computed(() => requestStatus() === 'pending'),
      isFulfilled: computed(() => requestStatus() === 'fulfilled'),
      error: computed(() => {
        const status = requestStatus();
        return typeof status === 'object' ? status.error : null;
      }),
    }))
  );
}

Describe any alternatives/workarounds you're currently using

I tried the following to fulfill my requirement by just creating an instance of the storeFeature and exposing a Method that will return the instance for any consumer:

const globalState = withGlobalState();
export function withGlobalStateInjector() {
    return globalState
}

Thanks.

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

• Yes
• No

[rainerhahnekamp]

Hey @BarakDabach,

I'd like to help but need more information. You want to have a feature which provide an instance of a global state, right?

What about that: https://stackblitz.com/edit/github-ia7mxg23?file=src%2Fquiz.store.ts

export const QuizStore = signalStore(
  // features...
);

export function withQuizStore() {
  return signalStoreFeature(
    withProps(() => ({ quizStore: inject(QuizStore) }))
  );
}

export const OtherStore = signalStore(
  withQuizStore(),
  withHooks((store) => ({
    onInit() {
      console.log(store.quizStore.title());
    },
  }))
);

[BarakDabach]

Yes -
I want to prevent a situation where in any component store i need to inject the global store and expose a computed signals that simple act as a pipe for the component template.
Tldr:
I want to use withGlobalState() that will integrate my global store on the consuming store.

[BarakDabach]

I don't familiar with the withProps().
Is that the solution?

[BarakDabach]

I will write a concrete example of my desire @rainerhahnekamp

[BarakDabach]

Lets say i have the following global state as a storeFeature

export type GlobalStateExample = {
    globalProp1: string,
    globalnum1: number,
    globalnum2: number,
}
const initialState: GlobalStateExample = {
    globalProp1:"global-string",
    globalnum1:1,
    globalnum2:2
}
//store feature
function withGlobalState() {
    return signalStoreFeature(
        {providedIn:'root'},  // just like in regular signal store - define that this feature is singletone
        withState(initialState),
        withComputed((store) =>({
            computedString: computed(()=>`${store.globalProp1()}_${store.globalnum1()}`)
        }) 
        )
    )
}

and the following component signalStore as a consumer

export type ComponentState = {
    loading: boolean
}
const initialState: ComponentState = {
    loading: true
}

export const componentStore = signalStore(
    withState(initialState),
    withGlobalState(), // integrate the global store
    withMethods((store) => ({
        addOne(number:string){
            var newGlobalValue = store.globalnum1() + number; // use the global property as part of the local store.
            patchState(store,{globalnum1:newGlobalValue})
        }
    })),
)

I am aware that this example domain is not the best - but i believe it gets the job done

hope it clear what i want to achieve.

@rainerhahnekamp - thank you for your support 💯💯💯

[rainerhahnekamp]

So it is just about the computeds? If yes, I think I can provide you with a solution?

[BarakDabach]

yes - Its just about the globalStore() signals()

[BarakDabach]

I think as a future feature if we had the ability to integrate a signalStore into another without the need to inject or create computed it would be very robust.
Especially when using a global- local design.

[rainerhahnekamp]

Well, in that case

export function withQuizStore() {
  return signalStoreFeature(
    withProps(() => ({ quizStore: inject(QuizStore) })),
    withComputed((state) => ({
      score: state.quizStore.score,
      title: state.quizStore.title,
      /// add other signals here...
    }))
  );
}

export const OtherStore = signalStore(
  withQuizStore(),
  withHooks((store) => ({
    onInit() {
      console.log(store.title());
    },
  }))
);

I don't think it happens that often, that a local store wants to patch through data from the global store 1:1. What is your opinion on that?

Another alternative would be that your component is working with both global and local store.

[BarakDabach]

From my experience - usually i use 70% of my globalState in different components.
That why i found myself searching for a solution that will solve duplicating the intergration of a globalStore in my local ones.
Event if i don't require a 1:1 relation between the stores - it is very robust to integrate a globalState by one line.

---

@rainerhahnekamp - maybe there are other use cases where you would want to integrate a store in another?

Maybe - extend an existing signalStore?

[rainerhahnekamp]

The solution above doesn't work for you?

You've have to do some manual work for withQuizStore but for your local stores, it is just a single command.

[BarakDabach]

The solution does work,

But it requires a globalStore and a globalStoreFeature

i was trying to combine the both as one unit of logic.

---

I believe your solution will be the one.

[rainerhahnekamp]

But it requires a globalStore and a globalStoreFeature

I see what you mean. We have to split it because a signalStoreFeature is not a service on its own and can therefore not be a provided globally.

[BarakDabach]

Exactly

Thank you for your support and solution🧠🧠