Angular项目用最新版NgRx无法从Store获取数据求助

你的Store状态结构和组件里的选择路径不匹配：根Store的状态由reducers/index.ts里的reducers对象定义，其中homeReducer是你设置的切片key，所以整个Store的结构是{ homeReducer: { MyBoolean: boolean } }，但组件里直接尝试获取store.MyBoolean，这个属性根本不存在，因此组件拿不到更新后的数据。

方案1：直接修正组件内的选择路径 #

修改home.component.ts，调整Store类型定义和选择器：

import { Component } from '@angular/core';
import { RouterOutlet, RouterModule } from '@angular/router';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { toggleBoolean } from '../actions/home.actions'; 
import { CommonModule } from '@angular/common';
// 导入homeReducer里的State类型
import { State as HomeState } from '../reducers/homeReducer';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [RouterOutlet, RouterModule, CommonModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent {
  MyBoolean$: Observable<boolean>;

  // 修正Store的类型，对应根状态结构
  constructor(private store: Store<{ homeReducer: HomeState }>) {
    // 先选择homeReducer切片，再取MyBoolean
    this.MyBoolean$ = this.store.select(store => store.homeReducer.MyBoolean);
  }

  toggleBoolean() {
    this.store.dispatch(toggleBoolean());
  }
}

方案2：使用NgRx官方推荐的Feature Selector（更规范） #

第一步：在homeReducer.ts中添加选择器 #

import { createReducer, on, createFeatureSelector, createSelector } from '@ngrx/store';
import { toggleBoolean } from '../actions/home.actions';

export interface State {
    MyBoolean: boolean;
}

export const initialState: State = {
    MyBoolean: false,
};

export const featureReducer = createReducer(
    initialState,
    on(toggleBoolean, (state) => {
        console.log(state)
        return { ...state, MyBoolean: !state.MyBoolean };
    })
);

// 创建Feature选择器，对应根Store中的"homeReducer" key
export const selectHomeState = createFeatureSelector<State>('homeReducer');
// 创建具体数据的选择器
export const selectMyBoolean = createSelector(selectHomeState, (state) => state.MyBoolean);

export function reducer(state: State | undefined, action: any) {
    return featureReducer(state, action);
}

第二步：在组件中使用这个选择器 #

import { Component } from '@angular/core';
import { RouterOutlet, RouterModule } from '@angular/router';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { toggleBoolean } from '../actions/home.actions'; 
import { CommonModule } from '@angular/common';
// 导入定义好的选择器
import { selectMyBoolean } from '../reducers/homeReducer';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [RouterOutlet, RouterModule, CommonModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent {
  MyBoolean$: Observable<boolean>;

  constructor(private store: Store) {
    // 直接使用预定义的选择器
    this.MyBoolean$ = this.store.select(selectMyBoolean);
  }

  toggleBoolean() {
    this.store.dispatch(toggleBoolean());
  }
}

修改后点击"test"按钮，组件就能正确获取到Store中homeReducer.MyBoolean的状态变化并展示了。

内容的提问来源于stack exchange，提问作者theworld