Question

版本：Angular = 6.1.6，@ ngrx = 6.1.0（通过npm list）。

当我在Angular应用中调度@ngrx Action时，未调用我的reducer函数。我猜测减速器是否以某种方式错误地注册或设置？

一切都进行转换/编译，并与ng serve一起使用。调试时，我可以看到单击按钮会导致调用store.dispatch()，但在“游戏”简化程序中什么也没发生。

我尝试通过将Actions作为自己的类来遵循“最佳实践”（AFAIK），但这增加了文件的复杂性，这使得提出这样一个棘手的问题很难共享（并且难以阅读/回答））！

我已经使用ng generate在应用程序中创建了大多数文件。我将在下面包含各种文件，但为了简洁起见，将省略一些行（希望保留所有关键内容）

app.module.ts 包含：

import { GameComponent } from './game/game.component';
import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './reducers';
...
@NgModule({
  declarations: [
    AppComponent,
    GameComponent
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    !environment.production ? StoreDevtoolsModule.instrument() : []
  ],
  providers: [],
  bootstrap: [AppComponent]
})

./ reducers / index.ts 包含

import {
  ActionReducer, ActionReducerMap, createFeatureSelector, createSelector, MetaReducer
} from '@ngrx/store';
import * as fromGame from './game.reducer';

export interface State {
  game: fromGame.State;
}

export const reducers: ActionReducerMap<State> = {
  game: fromGame.reducer,
};

./ reducers / game.reducer.ts 包含：

import { GameActionTypes, GameActions } from './game.actions'
import { Game } from '../game'

export interface State {
  game: Game;
}

export const initialState: State = {
  game: new Game()
};


export function reducer(state = initialState, action: GameActions): State {
  switch (action.type) {
    case GameActionTypes.StartNewGame:
      console.log("Reducer: Start New Game") // Never getting here!
      console.log(state)
      return state;
    default:
      return state;
  }
}

./ reducers / game.actions.ts 包含

import { Action } from '@ngrx/store';

export enum GameActionTypes {
  StartNewGame = '[Game] New Game'
}

export class StartNewGame implements Action {
  readonly type = GameActionTypes.StartNewGame;
}

export type GameActions = StartNewGame // Will add more actions here eventually

动作在我的游戏组件中调度。我可以确认通过调试器调用了dispatch： ./ game / game.component.ts 包含：

export class GameComponent implements OnInit {

  constructor(
    private gameService: GameService,
    private store: Store<Game>
  ) {
  } 

  ngOnInit() {
  }

  startNewGame(): void {
    // Dispatch an Action. This should call the reducer function in game.reducer.ts
    this.store.dispatch( new fromActions.StartNewGame() );
  } 
  ...

package.json

{
  "name": "my-game",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ngrx/store": "^6.1.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.5",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@ngrx/schematics": "^6.1.0",
    "@ngrx/store-devtools": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

@ngrx分派未在Angular 6应用中调用reducer

0 个答案: