Ngrx最新版本，无法从商店检索数据

Question

我正在尝试在我的 Angular 项目中使用 ngrx，但由于某种原因，我无法检索和显示数据，并且我已经尝试了在互联网上可以找到的所有内容，我正在使用最新版本的 Angular 和 ngrx。在控制台中，当我单击 home.html 中的“test”时，它显示“MyBoolean”的状态在商店中正在更改，但我无法从商店中检索它。 感谢您的帮助和您的时间。

main.ts

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideStore } from '@ngrx/store';
import { reducers, metaReducers } from './reducers';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideStore(reducers, { })]
};

reducers/index.js

import { reducer } from "./homeReducer"
import { isDevMode } from '@angular/core';
import {
  ActionReducer,
  ActionReducerMap,
  createFeatureSelector,
  createSelector,
  MetaReducer
} from '@ngrx/store';

export const reducers: ActionReducerMap<any> = {
  homeReducer: reducer
};


export const metaReducers: MetaReducer<any>[] = isDevMode() ? [] : [];

减速机/homeReducer.ts

import { createReducer, on } 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)
        const s = { ...state, MyBoolean: !state.MyBoolean }
        return s;
    })
);

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

home.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { RouterModule } from '@angular/router';

import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { toggleBoolean } from '../actions/home.actions'; 
import { CommonModule } from '@angular/common';



@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<{ MyBoolean: boolean }>) {
//  this.MyBoolean$ = this.store.select("MyBoolean");
    this.MyBoolean$ = this.store.select(store => store.MyBoolean);
  }

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

home.component.html

<div>
<button type="button" (click)="toggleBoolean()">test</button>
<h1>boolean: {{ MyBoolean$ | async }}</h1>
</div>

app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [{
    path: 'home',
    component: HomeComponent,
    title: 'Home page'
}];

Answer 1

我认为你需要使用选择器来获取商店状态的切片。 例子：

export const selectFeature = (state: State) => state.Myboolean;
    
export const selectMyboolean = createSelector(
      selectFeature,
      (state) => state
    );