In my project, I have set up a Store using Angular and NgRx 13. Within my SharedModule, I define components including selectors which load content into the store to prevent redundant API calls.
https://i.stack.imgur.com/sr3nl.png
This approach is implemented through the following code:
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);
The priorities feature follows a similar structure.
My goal is to consolidate all features under a 'shared' feature rather than declaring each one individually. To achieve this, I created:
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,
};
Finally, in my SharedModule, I include the following:
StoreModule.forFeature(fromShared.sharedFeatureKey, fromShared.reducers),
https://i.stack.imgur.com/IeY0F.png
Everything seems fine at first glance.
ISSUE
However, I am facing a problem where I cannot access the content of the lists. This warning message keeps popping up:
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.
A similar warning appears for the priorities feature. I suspect that the issue lies within the selectors, but despite spending hours trying to resolve it, I haven't found a solution yet.
The logs showing 'undefineds' indicate the problem with the selectors:
this.store
.select(selectPrioritiesList)
.pipe(take(1))
.subscribe(priorities => {
console.log('priorities -->', priorities);
});
https://i.stack.imgur.com/1El4b.png
What could I be doing wrong? Any help is greatly appreciated.