@ngrx/signals: Can a ngrx signal feature store access the state of it's consuming store?

[Donnerstagnacht]

Can a ngrx signal feature store access the state of it's consuming store?

I would like to define a feature store that takes as input(or references) a state from the store which uses/consumes the store, e.g. the parent of the ngrx signal feature store.

For example, I have a store called "withCounters()" that holds a "state variable" called "counterA" of type "number". I would like to add a feature store that can access these state variables.

export function withCounters() {
    withState({
        counterA: 0
    }),

    withDecrement(state)
}

The "withDecrement" feature should be able to access its consumers state, e.g. the "counterA" variable.

 export function withDecrement(consumerState: NgRxParentStore) {
    return signalStoreFeature(

        withMethods((consumerState) => ({

            logParentState() {
                console.log(consumerState);
            },

            decrement(key: keyof consumerState) {
                patchState(parentState, {key: consumerState[key]-1});
            }
        }))
    )
}

Is this doable? If yes, how? My main question is how I can access the consumer's store state?

I created a stackoverflow question here: https://stackoverflow.com/questions/78603106/can-i-pass-access-a-state-of-a-parent-store-to-a-ngrx-signal-feature-store

[Donnerstagnacht]

A direct access seems to be not possible without coupling the stores.

Instead, the ngrx team suggests to use a wrapper function: #4340

Read the full thread here:

A working example with a wrapper function: https://stackblitz.com/edit/ngrx-signal-store-starter-z3q5i5?file=src%2Fmain.ts

A non working example due to coupling:https://stackblitz.com/edit/ngrx-signal-store-starter-23tsna?file=src%2Fmain.ts

[rainerhahnekamp]

@Donnerstagnacht. Thanks for the flowers, but I am a mere mortal and not part of the NgRx team :)

[Donnerstagnacht]

Honour to whom honour is due! Thank you for the solution.

But may why the direct sharing is not working? What is the reason for the coupling?

Also from my point of view - as a developer with less experience - your proposed way to make a function accessible to a consumed feature store feels intuitive. However, making a state property accessible via a wrapper function does not feel intuitive to me. Is there no other design possible which would enable developers to use patchStore() in a feature store considering the constraint that the feature store is still decoupled/reuseable? For example a config parameter that allows sharing state to consumed stores?

export function withCounters() {
    {
       providedIn: 'root',
       shareStateWithConsumedStores: true
    },
    withState({
        counterA: 0
    }),

    withDecrement(state)
}

[rainerhahnekamp]

patchState requires that the caller has the type of the state, respectively the instance of the store.

If withIncrement should be a generic feature, i.e. you want to apply it to other stores, you cannot have a specific store type in it.

Whenever you have a circular dependency in software development (store depends on withIncrement, withIncrement depends on store), you resolve it by decoupling both and introducing a third element that has a dependency on these two.

In our case, that would be

  withFeatureFactory((store) =>
    withIncrement<Counter>('items', (fn: (state: Counter) => Counter) => {
      patchState(store, (value) => fn(value));
    })
  )

Do you understand what I mean?