RFC: signalStoreFeature and access to Store

[rainerhahnekamp]

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

signals

Information

This is a proposal for connector function which connects a signalStore to a feature and provides the feature access to store-specific elements.

A StackBlitz example is available here: https://stackblitz.com/edit/ngrx-signal-store-starter-wkuxdh

---

Sometimes, our Signal Store Features require features from the store they should be plugged in. Since features should be re-usable, direct coupling is impossible.

Following use case. A feature requires access to a loading function which is defined in withMethods of the store.

We have the following feature

function withEntityVersioner<Entity>(loader: () => Observable<Entity[]>) {
  return signalStoreFeature(
    withState({ version: 1, entities: new Array<Entity>() }),
    withMethods((store) => {
      return {
        update: rxMethod<unknown>(
          pipe(
            switchMap(() => loader()),
            filter((entities) => entities !== store.entities()),
            tap((entities) =>
              patchState(store, (value) => ({
                entities,
                version: value.version + 1,
              })),
            ),
          ),
        ),
      };
    }),
    withHooks((store) => ({ onInit: () => store.update(interval(1000)) })),
  );
}

And a store which wants to use it:

interface Person {
  firstname: string;
  lastname: string;
}

signalStore(
  withMethods(() => {
    const httpClient = inject(HttpClient);
    return {
      load() {
        return httpClient.get<Person[]>('someUrl');
      },
    };
  }),
  withEntityVersioner(() => store.load()) // does not compile
);

The proposed feature is about a function withFeatureFactory which connects an autonomous feature to a specific store.

signalStore(
  withMethods(() => {
    const httpClient = inject(HttpClient);
    return {
      load() {
        return httpClient.get<Person[]>('someUrl');
      },
    };
  }),
  withFeatureFactory((store) => withEntityVersioner(() => store.load())),
);

---

The type of withFeatureFactory would look like this:

export declare function withFeatureFactory<
  Input extends SignalStoreFeatureResult,
  Feature extends SignalStoreFeatureResult,
>(
  featureSupplier: (
    store: Prettify<
      SignalStoreSlices<Input['state']> &
        Input['signals'] &
        Input['methods'] &
        StateSignal<Prettify<Input['state']>>
    >,
  ) => SignalStoreFeature<EmptyFeatureResult, Feature>,
): SignalStoreFeature<Input, EmptyFeatureResult & Feature>;

This feature would be helpful in the discussion #4338.

Although, it is different use case, it is very similar to the suggestion of @gabrielguerrero in #4314 (comment)

Describe any alternatives/workarounds you're currently using

The alternative is that the load function in the example would come from a service which the signalStoreFeature has to inject.

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

• Yes
• No