'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