Селектор NGRX не выполняется, и в компоненте нет подписки

Привет всем старшим разработчикам с опытом работы в NGRX.

Я пытаюсь реализовать приложение диспетчера задач, используя ngrx в качестве личного проекта для изучения NgRx, однако при отправке события из хранилища мой поток данных не завершается. Я новичок в NgRx, может кто-нибудь объяснить мне, что я делаю неправильно?

У меня есть кнопка, которая открывает диалоговое окно с простым полем ввода. После нажатия кнопки отправки я хочу добавить этот новый элемент в массив элементов, однако я либо получаю «неопределенное», либо вообще ничего не получаю.

Вот все фрагменты кода, которые взаимодействуют между ними.

app.state.ts

import { MenuState } from "../states/reducers/menu.reducer";

export interface AppState {
    menuState:MenuState; // I want to add more states here for Tasks, Subtasks and so on
}

index.ts для нескольких редукторов

// This file is imported in app.module.ts
import { menuReducer } from './menu.reducer';

export const reducers = {
  menu: menuReducer // More reducers will be added here
};

app.module.ts

// NGRX Imports
import { reducers } from './states/reducers';
import { StoreModule } from '@ngrx/store';

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
    AtomsModule,
    StoreModule.forRoot(reducers)
  ],

NewBoardDialogComponent

  onSubmit(){
    let newMenuItem: MenuItem = {
      menuItemIcon: 'table_chart',
      menuItemType: MenuItemType.DISPLAY_BOARD,
      boardTitle: this.newBoardForm.value['boardTitle'].trim(),
    }
    this.store.dispatch(addMenuItem({menuItem: newMenuItem})); // Executes properly
    this._modalService.close();
  } 

меню.actions.ts

import { createAction, props } from '@ngrx/store';
import { MenuItem } from '../../models/menuItem.model';


export const removeMenuItems = createAction(
  '[Menu Item] Remove Menu Items',
  props<{ menuItem: MenuItem }>()
);
  
export const addMenuItem = createAction(
  '[Sidenav] Add Menu Items',
  props<{ menuItem: MenuItem }>()
);

export const loadMenuItems= createAction('[MenuItem] Load Menu Items');

меню.редуктор.ц

import { Action, createReducer, on } from '@ngrx/store';
import { MenuItem } from "../../models/menuItem.model";
import {addMenuItem, loadMenuItems} from '../actions/menu.actions'

export interface MenuState {
    menuItems: MenuItem[];
    error: string | undefined;
    status: string;
}

export const initialState: MenuState = {
    menuItems: [],
    error: '',
    status: 'pending'
}

export const menuReducer = createReducer(
    initialState,
    on(addMenuItem, (state, action) => ({
        ...state,
        menuItems: [...state.menuItems, action.menuItem ], // I can see the new Menu Item data here
      })),
    on(loadMenuItems, (state) => ({ ...state, status: 'loading' })),
)

export const featureKey = 'MenuItemsState';

меню.селектор.ц

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { AppState } from '../app.state';
import { MenuState, featureKey } from '../reducers/menu.reducer';

export const selectMenuItems = (state: AppState) => state.menuState;
export const getViewState = createFeatureSelector<MenuState>(featureKey );
export const selectAllMenuItems = createSelector(
    selectMenuItems,
  (state: MenuState) => state?.menuItems
);

Sidenav.comComponent.ts

 ngOnInit(): void {
    this.store.select(selectAllMenuItems).subscribe({ // Not triggering, but here i am supposed to see the updated manuItems array
      next: (payload)=>{
        console.info(payload);
      },
      error: (error)=>{
        console.info(error);
      }
    });
  }