Angular2+ wyciąganie ze stora

Question

Chciałabym mieć jeden reducer składający się z kilku elementów, gdzie będę sobie uaktualniać dane. 
Nie potrafię napisać selektora, aby wyjąć potrzebną tablicę, pomóżcie. Gdzie robię błąd?
Dostaję, że lista jest undefined :(

To jest mój index:

export const getDishState = createFeatureSelector('dish');
export const getIngredientsList = createSelector(getDishState, (state: AppStateInterface) => state.ingredientList);

To mój reducer: 
 

export const initialState: AppStateInterface = {
  ingredientList: [],
  dishList: [],
  selectedDish: null,
};

export function DishReducer(state: AppStateInterface = initialState, action) {
  switch (action.type) {
    case ADD_INGREDIENT_TO_LIST_SUCCESS: {
      return {
        ...state,
        ingredientList: action.payload,
      };
    }
    default:
      return state;
  }
}

To mój state:
 

export interface AppStateInterface {
   ingredientList: IngredientModel[];
   dishList: DishModel[];
   selectedDish: DishModel;
 }

To część module.ts:
 

  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot({DishReducer}),
    EffectsModule.forRoot([DishEffects])
  ],
  providers: [DishService, DishActions, DishEffects],
  bootstrap: [AppComponent]

A tu próbuję zaimplementować listę z selektora:

<ingredient-list
[ingredients]="(listOfIngredients$ | async)"
></ingredient-list>

i w ts.:

  public listOfIngredients$: Observable<IngredientModel[]>;
   
 this.listOfIngredients$ = store.select(getIngredientsList);

...