CODEWITHSUNDEEP
angularlazy-loadingngrxngrx-store
JSON
JSON

Reputation: 1623

How to subscribe to changes in feature module in NgRx?

I am using AoT, and lazy-loading. I am trying to lazy load my store modules as well. my problem is when I subscribe to feature module I get 'undefined' instead of getting the store data, using Redux dev tools, I can see that the feature is lazily loaded and populated with data properly.

this my appState reducer,

export interface AppState {
  auth: fromAuth.State;
  httpAction: fromHttpActions.State;
  Geo: fromGeoActions.State;
  UI: fromUI.State;
  DbSearch: fromDbSearch.State;
  LocationSearch: fromlocationSearchReducer.State;
  AppDropdownList: fromdropdownReducer.State;
}

export const reducers: ActionReducerMap<AppState> = {
  auth: authReducer,
  httpAction: httpActionReducer,
  Geo: geoReducer,
  UI: userInterfaceReducer,
  DbSearch: dbSearchReducer,
  LocationSearch: locationSearchReducer,
  AppDropdownList: dropdownReducer
};

and I inject it in my main app-module as following,

StoreModule.forRoot(reducers),

the above modules are working perfectly,

the problem is in the following,

export interface IRegistryState {
  patientRegistration: frompatientRegistrationReducer.State;
}
export const registryReducers: ActionReducerMap<IRegistryState> = {
  patientRegistration: patientRegistrationReducer
};

and I inject it in the feature-module as following,

StoreModule.forFeature('registryStore', registryReducers),

when I do the following, the returned value is always undefined

  this.registryStore.select(s => s.patientRegistration).subscribe(data => {
      console.log(data);
    });

What am I doing wrong here?

enter image description here

Upvotes: 1

Views: 1035

Answers (1)

JSON
JSON

Reputation: 1623

Solved by adding createFeatureSelector to my AppState Module const getRegistryState. so after creating the feature store module I needed to add the following charm to my AppStore Module,

export interface AppState {
  auth: fromAuth.State;
  httpAction: fromHttpActions.State;
  Geo: fromGeoActions.State;
  UI: fromUI.State;
  DbSearch: fromDbSearch.State;
  LocationSearch: fromlocationSearchReducer.State;
  AppDropdownList: fromdropdownReducer.State;
}

export const reducers: ActionReducerMap<AppState> = {
  auth: authReducer,
  httpAction: httpActionReducer,
  Geo: geoReducer,
  UI: userInterfaceReducer,
  DbSearch: dbSearchReducer,
  LocationSearch: locationSearchReducer,
  AppDropdownList: dropdownReducer
};
export const getRegistryState = createFeatureSelector<IRegistryState>(
  'registryStore'
);

and in the component you still call AppState Store and you select the feature selector as following,

this.appStore
          .select(fromApp.getRegistryState)
          .map(data => data.patientRegistration)
          .subscribe(data => {
            if (data.loaded) {
              this.patientRestration.patchValue(data.patientData);
              console.log(data.patientData);
            }
          });

Upvotes: 1

Related Questions