Currently, I am facing an issue with implementing a NgRx store using @ngrx/entity library. Despite Redux Devtools showing my collection loaded by Effect() as entities properly, I am unable to retrieve any data using @ngrx/entity getSelectors. Thus, it seems that my Effect is working correctly. Now, my goal is to select the data as an array by utilizing the selectAll selector from adapter.getSelectors() function in my reducer index setup.
reducers/index.ts
import { ActionReducerMap, createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromModels from './models.reducer';
import { EntityState } from '@ngrx/entity';
export interface State {
models: fromModels.State;
}
export const reducers: ActionReducerMap<State> = {
models: fromModels.reducer
};
export const getModelsState = createFeatureSelector<fromModels.State>('models');
export const { selectAll: getAllModels } = fromModels.adapter.getSelectors(getModelsState);
reducers/models.reducer.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { createEntityAdapter, EntityState, EntityAdapter } from '@ngrx/entity';
import { ModelsActions, ModelsActionTypes } from '../actions';
import { Model } from '../../models/model';
export const adapter: EntityAdapter<Model> = createEntityAdapter<Model>({
selectId: model => model.id,
sortComparer: (modelA, modelB) => modelA.id === modelB.id ? 0 : (modelA.id === modelB.id ? 1 : -1)
});
export interface State extends EntityState<Model> {}
const initialState = adapter.getInitialState();
export function reducer(state = initialState, action: ModelsActions): State {
switch (action.type) {
case ModelsActionTypes.LoadSuccess:
return adapter.addAll(action.payload, state);
default: return state;
}
}
In my container component, I attempt to select the data using the ngrx/entity selector and display the data using the async pipe. Here is a shortened version of the template:
models.component.ts
// All other import statements
import { Store, select } from '@ngrx/store';
import * as fromFeature from '../store';
@Component({
template: `{{models$ | async}} | json`
})
export class ModelsComponent implements OnInit {
models$: Observable<Model[]>;
constructor(private store: Store<fromFeature.State>) {}
ngOnInit() {
this.models$ = this.store.select(fromFeature.getAllModels);
this.store.dispatch(new fromFeature.LoadModels());
}
}
The console returns an error message:
ModelsComponent.html:2
ERROR TypeError: Cannot read property 'ids' of undefined
at selectIds (entity.es5.js:45)
at eval (store.es5.js:572)
I would appreciate any suggestions or ideas on how to resolve this issue. Thank you!
UPDATE [Requested template]
The template simply subscribes to the models$ observable, following the same logic as in the previous template. The model-card.component.ts only receives Input()'s and ng-content.