'Howto get value from store ngrx using ngrx entity and multiple reducer
I am newbie with ngrx entity, and also in angular. I am trying to store data in the store with ngrx, with multiple reducers. I think am doing well, but the problem is I don´t know howto get the value from the store to display in my component by the selector. For the example am using 2 reducer
accueil-entities-reducer.ts
import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
import { IEntities } from './../../main/pages/accueil/model/i-entities';
export interface IEntitiesState extends EntityState<IEntities>
{
allEntitiesLoaded: boolean;
}
export const adapterEntities: EntityAdapter<IEntities> = createEntityAdapter<IEntities>({
selectId: entity => entity.stc_Id
});
export const initialEntitiesState = adapterEntities.getInitialState({
allEntitiesLoaded: false
});
export const {
// select the array of Entities ids
selectIds: selectEntitiesIds,
// select the dictionary of entities
selectEntities: selectDictionaryOfEntities,
// select the array of Entities
selectAll: selectAllEntities,
// select the total Entities count
selectTotal: selectEntitiesTotal
} = adapterEntities.getSelectors();
accueil-searchactifs-reducer.ts
import { createReducer } from '@ngrx/store';
import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
import { IEntitiesQuickSearchActifs } from 'src/app/main/pages/accueil/model';
export interface IEntitiesQuickSearchActifsState extends EntityState<IEntitiesQuickSearchActifs>
{
allActifsLoaded: boolean;
}
export const adapter: EntityAdapter<IEntitiesQuickSearchActifs> = createEntityAdapter<IEntitiesQuickSearchActifs>({
selectId: actif => actif.atf_Id
});
export const initialSearchActifsState = adapter.getInitialState({
allActifsLoaded: false
});
export const searchActifsReducer = createReducer(
initialSearchActifsState,
);
export const {
selectAll
} = adapter.getSelectors();
accueil-reducer.ts
import { createReducer, on } from '@ngrx/store';
import { fromAccueilActions } from "../actions/accueil-actions-types";
import * as fromAccueilEntitiesReducer from "./accueil-entities-reducer";
import * as fromAccueilQuickSearchActifsReducer from "./accueil-searchactifs-reducer";
export interface AccueillState {
entities: fromAccueilEntitiesReducer.IEntitiesState;
QuickSearchActifs: fromAccueilQuickSearchActifsReducer.IEntitiesQuickSearchActifsState;
selectedCategory: string;
}
export const initialAccueillState: AccueillState = {
entities: fromAccueilEntitiesReducer.initialEntitiesState,
QuickSearchActifs: fromAccueilQuickSearchActifsReducer.initialSearchActifsState,
selectedCategory: "NON-FICTION",
};
export const selectEntitiesIds = fromAccueilEntitiesReducer.selectEntitiesIds;
export const selectDictionaryOfEntities = fromAccueilEntitiesReducer.selectDictionaryOfEntities;
export const selectAllEntities = fromAccueilEntitiesReducer.selectAllEntities;
export const selectEntitiesTotal = fromAccueilEntitiesReducer.selectEntitiesTotal;
export const selectAllSearchActifs = fromAccueilQuickSearchActifsReducer.selectAll;
export const accueilReducer = createReducer(
initialAccueillState,
on(fromAccueilActions.allEntitiesLoaded, (state, {entities}) => {
return {
...state,
entities: fromAccueilEntitiesReducer
.adapterEntities
.addMany(entities,
{
...state.entities,
allEntitiesLoaded: true
}),
};
}),
);
accueil-selector.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { ACCUEIL_FEATURE_NAME } from 'src/app/main/pages/accueil/accueil.module.state';
import * as fromAccueil from '../reducers/accueil-reducer'
import { AccueillState } from '../reducers/accueil-reducer';
export const selectAccueillState = createFeatureSelector<AccueillState>(ACCUEIL_FEATURE_NAME);
// select the array of Entities ids
const selectEntitiesIds = createSelector(
selectAccueillState,
state => fromAccueil.selectEntitiesIds
);
// select the dictionary of entities
const selectDictionaryOfEntities = createSelector(
selectAccueillState,
state => fromAccueil.selectDictionaryOfEntities
);
// select the array of Entities
const selectAllEntities = createSelector(
selectAccueillState,
state => fromAccueil.selectAllEntities
);
export const EntitiesQuery = {
selectEntitiesIds,
selectDictionaryOfEntities,
selectAllEntities,
};
accueil.component.ts
this.store.select(EntitiesQuery.selectAllEntities)
.subscribe(
{
next:(data) =>{
debugger;
this.treeEntitieDataSource = data; ===> Error here I should have here IEntities[], but I don´t.
// the error is Type 'Observable<(state: EntityState<IEntities>) => IEntities[]>' is not assignable to type 'Observable<IEntities[]>'.
console.log("Retrieve list of Entities from store with sucess")
},
error:(error) =>{
debugger;
console.log("Retrieve list of Entities from store with error:"+ error)},
complete:()=>{
debugger;
console.log("Retrieve list of Entities from store")},
}
);
Can you help me, Thanks in advance.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
