要解决Angular与ngrx没有任何反应的问题,需要检查以下几个方面:
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
@NgModule({
imports: [
StoreModule.forRoot({}), // 导入store
EffectsModule.forRoot([]), // 导入effects
],
...
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { AppState } from './app-state.model';
import { selectSomeData } from './app.selectors';
@Component({
...
})
export class AppComponent implements OnInit {
someData$ = this.store.pipe(select(selectSomeData));
constructor(private store: Store) {}
ngOnInit() {
// 在初始化时派发一个action
this.store.dispatch({ type: '[App] Load Data' });
}
}
import { ActionReducerMap, MetaReducer } from '@ngrx/store';
import { someDataReducer } from './some-data.reducer';
export interface AppState {
someData: any;
}
export const reducers: ActionReducerMap = {
someData: someDataReducer,
};
export const metaReducers: MetaReducer[] = [];
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { map, mergeMap } from 'rxjs/operators';
import { DataService } from './data.service';
@Injectable()
export class AppEffects {
loadData$ = createEffect(() =>
this.actions$.pipe(
ofType('[App] Load Data'),
mergeMap(() =>
this.dataService.getData().pipe(
map((data) => ({ type: '[App] Data Loaded', payload: data }))
)
)
)
);
constructor(private actions$: Actions, private dataService: DataService) {}
}
确保在根模块中导入并注册了AppEffects:
import { EffectsModule } from '@ngrx/effects';
import { AppEffects } from './app.effects';
@NgModule({
imports: [
EffectsModule.forRoot([AppEffects]), // 导入effects
],
...
})
export class AppModule { }
通过检查以上几个方面,可以找到Angular与ngrx没有任何反应的问题,并修复代码示例。