I am trying to implement ngrx on an app but having this problem of connecting the states. I have a root reducer that provides to store as StoreModule.forRoot(reducers)
in the app.module.ts
rootreducer:
import * as fromAuth from 'app/auth/auth.reducer'
import { authReducer } from 'app/auth/auth.reducer';
export interface State {
auth: fromAuth.State;
}
export const reducers: ActionReducerMap<State> = {
auth: fromAuth.authReducer
};
I created an index.ts in the lazyloading folder lazyloading/index.ts:
export interface CollectionsState {
collections: fromCollections.State;
pages: fromPages.State;
}
export interface State extends fromRoot.State {
collections: CollectionsState;
}
export const reducers = {
collection: fromCollections.collectionReducer,
page: fromPages.pageReducer
};
export const getCollectionsState = createFeatureSelector<CollectionsState>('collections');
export const getCollectionEntitiesState = createSelector(
getCollectionsState,
state => state.collections
);
And in the lazy loaded module provided it as StoreModule.forFeature('collections', reducers)
Then I try to use it in a component as
import { Store, select } from '@ngrx/store';
import * as actions from '@collections/state/actions/collection.actions';
import * as fromCollections from '@collections/state';
//get collections
this.cols = this.store.pipe(select(fromCollections.selectAll))
this.store.dispatch( new actions.Query() );
This gives me an error, undefined at selectIds
IndexComponent.html:10 ERROR TypeError: Cannot read property 'ids' of undefined at selectIds (entity.es5.js:45) at eval (store.es5.js:567) at Array.map () ......
How can I fix this?