Ngrx 存储值未显示在组件模板中

Question

我正在尝试全神贯注于 Ngrx，在通读了文档之后，我试图拼凑出一个使用它们的简单示例。

我的问题是，尽管商店已设置并且 reducer 正在按预期工作（我可以在 redux 工具中看到商店正在更新），但模板不会显示任何内容。

我检查过类似的问题，但似乎无法正常工作。

感谢任何帮助！

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { CounterExampleComponent } from './counter-example/counter-example.component';
import * as ScoreboardReducer from './store/counter.reducer';

@NgModule({
  declarations: [
    AppComponent,
    CounterExampleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot( { game: ScoreboardReducer.counterReducer } ),
    StoreDevtoolsModule.instrument( {
      maxAge: 25
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

counter.reducer.ts

import { Action, createReducer, on } from '@ngrx/store';
import * as CounterActions from './counter.actions';


export interface State {
    home: number,
    away: number
}

export const initialState: State = {
    home: 0,
    away: 0
}

const _counterReducer = createReducer(
    initialState,
    on( CounterActions.homeIncrement, ( state ) => ( { ...state, home: state.home + 1 } ) ),
    on( CounterActions.awayIncrement, ( state ) => ( { ...state, away: state.away + 1 } ) ),
    on( CounterActions.homeDecrement, ( state ) => ( { ...state, home: state.home - 1 } ) ),
    on( CounterActions.awayDecrement, ( state ) => ( { ...state, away: state.away - 1 } ) ),
    on( CounterActions.reset, ( state ) => ( { ...state, home: 0, away: 0 } ) ),
);

export function counterReducer( state: State | undefined, action: Action ) {
    return _counterReducer( state, action );
}

反-example.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import * as CounterActions from '../store/counter.actions';
import { State } from '../store/counter.reducer';

@Component({
  selector: 'app-counter-example',
  templateUrl: './counter-example.component.html',
  styleUrls: ['./counter-example.component.scss']
})
export class CounterExampleComponent implements OnInit {
  homeCount$: Observable<number>;
  awayCount$: Observable<number>

  constructor( private store: Store<State>) {
    this.homeCount$ = this.store.select( store => store.home );
    this.awayCount$ = this.store.select( store => store.away );
  }

  ngOnInit(): void {}

  home_increment() {
    this.store.dispatch( CounterActions.homeIncrement() );
  }

  home_decrement() {
    this.store.dispatch( CounterActions.homeDecrement() );
  }

  away_increment() {
    this.store.dispatch( CounterActions.awayIncrement() );
  }

  away_decrement() {
    this.store.dispatch( CounterActions.awayDecrement() );
  }

  reset() {
    this.store.dispatch( CounterActions.reset() );
  }

}

反-example.component.html

<div>
    <button (click)="home_increment()">Increment</button>

    <div>Home Count: {{ homeCount$ | async }}</div>

    <button (click)="home_decrement()">Decrement</button>
</div>
<br>
<div>
    <button (click)="away_increment()">Increment</button>

    <div>Away Count: {{ awayCount$ | async }}</div>

    <button (click)="away_decrement()">Decrement</button>
</div>
<br>
<button (click)="reset()">Reset Counter</button>

Answer 1

您的代码与示例 on the ngrx store website 几乎相同，但我对其进行了测试，它也没有为我显示 component 上的主场或外场。

StoreModule.forRoot 正在寻找 ActionReducerMap，所以我通过更改代码中的一些内容使其工作。

counter.reducer.ts 使用添加到 App 范围状态 AppState 的 CounterState。然后导出减速器准备 app.module.ts

export const reducers: ActionReducerMap<AppState> = {
  counter: counterReducer
};

export interface AppState {
  counter: CounterState
}

export interface CounterState {
  home: number,
  away: number
}

app.module.ts

import { reducers } from './store/counter.reducer';

StoreModule.forRoot(reducers, {})

反-example.component.ts selectors

略有变化

import { AppState } from './store/counter.reducer';

constructor( private store: Store<AppState>) {
  this.homeCount$ = this.store.select( store => store.counter.home );
  this.awayCount$ = this.store.select( store => store.counter.away );
}

Ngrx 存储值未显示在组件模板中

Ngrx store value not displaying in component template

angular

typescript

observable

ngrx-store