NGRX 选择器未执行且组件中没有订阅

Question

各位具有 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');

菜单.reducer.ts

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';

菜单.选择器.ts

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.component.ts

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

Answer 1

AppState 与减速器（构建状态）不匹配。

更改：

状态和特征选择器：

export interface AppState {
    menu:MenuState;
}
export const selectMenuItems = (state: AppState) => state.menu;

或减速机：

export const reducers = {
  menuState: menuReducer 
};