Multiples features inside a feature

Question

I have defined a Store with Angular and NgRx 13. I have a SharedModule where I define component such as selectors, etc. Each selector content is loaded in the store, so that I can avoid the repeat of an API call.

This is defined in this way:

shared.module.ts

/**...*/
 StoreModule.forFeature(clientsFeature),
 StoreModule.forFeature(prioritiesFeature),
/**...*/

clients.feature.ts

import { createFeature, createSelector, createReducer, on } from '@ngrx/store';
import { ClientDTO } from '@shared/model/client.models';

import * as ClientsActions from './clients.actions';

export const initialState: ClientDTO[] = [];

export const clientsFeature = createFeature({
  name: 'clients',
  reducer: createReducer(
    initialState,
    on(ClientsActions.getClientListSuccess, (state, { clients }): ClientDTO[] => clients)
  ),
});

export const selectClientList = createSelector(clientsFeature.selectClientsState, clients => clients);

Priorities feature is similar.

What I'm trying to do is avoiding to declare each feature and use a 'shared' feature that contains all the subfeatures. To do this, I create:

index.ts

import { ActionReducerMap } from '@ngrx/store';
import { ClientDTO } from '@shared/model/client.models';
import { Priority } from '@shared/model/priorities.models';
import { clientsFeature } from './clients/clients.reducer';
import { prioritiesFeature } from './priorities/priorities.reducer';

export const sharedFeatureKey = 'shared';

export interface SharedState {
  clients: ClientDTO[] | null;
  priorities: Priority[] | null;
}

export const reducers: ActionReducerMap<SharedState> = {
  clients: clientsFeature.reducer,
  priorities: prioritiesFeature.reducer,
};

And my shared.module :

    StoreModule.forFeature(fromShared.sharedFeatureKey, fromShared.reducers),

All ok.

PROBLEM

Doing this I cannot access to the content of the list. I'm sure I'm missing something, but I don't know what. I get this warning:

ngrx-store.mjs:724 @ngrx/store: The feature name "clients" does not exist in the state, therefore createFeatureSelector cannot access it. Be sure it is imported in a loaded module using StoreModule.forRoot('clients', ...) or StoreModule.forFeature('clients', ...). If the default state is intended to be undefined, as is the case with router state, this development-only warning message can be ignored.

And another similar with priorities. I'm pretty sure that the problem are in the selectors, but after trying for hours, I cannot found a solution.

The undefineds are the log of the content of the selector:

    this.store
      .select(selectPrioritiesList)
      .pipe(take(1))
      .subscribe(priorities => {
        console.log('priorities -->', priorities);
      });

What I am doing wrong? Thanks in advance

You have to fix selectors Look at #5 in this answer - https://stackoverflow.com/a/72884560/13824324 — klivladimir, Nov 01 '22 at 11:47

score 0 · Answer 1 · answered Apr 26 '22 at 10:35

The problem is with the selectors. Because you added an extra "shared" layer, the selectors need to be updated.

Currently, the createFeature isn't configurable and uses the top level state to select sub-states. This means you can't use the provided selectors from createFeature, but you'll have to write the selectors manually.

Multiples features inside a feature

1 Answers1