在组件的构造函数中调度操作时不调用 ngrx 效果

Question

这是我的应用程序模块：

@NgModule({
declarations: [
SampleA
],
imports: [
BrowserModule,
EffectsModule.forRoot([APIEffects]),
HttpClientModule,
StoreModule.forRoot(reducers),
StoreDevtoolsModule.instrument({
maxAge: 25, // Retains last 25 states
logOnly: environment.production, // Restrict extension to log-only mode
}),
KeyboardShortcutsModule.forRoot()
],
providers: [
APIService,
{
provide: HTTP_INTERCEPTORS,
useClass: HttpMockRequestInterceptor,
multi: true
}
],
bootstrap: [],
entryComponents: [
SampleComponent
]
})
export class AppModule{...}

这是APIEffect：

@Injectable()
export class APIEffects {
fetchData$ = createEffect(() => this.actions$.pipe(
ofType(Actions.apiFetchData),
mergeMap((action) => this.apiService.fetchData(...action)
.pipe(
map(data => Actions.apiSuccess({ data })),
catchError(() => of(Actions.apiCallFailed()))
)
)
));
}

现在，如果我在构造函数中apiFetchData操作SampleComponent，则不会调用效果：

export class SampleComponent {
constructor(private store: Store<{ state: State }>) {
store.dispatch(Actions.apiFetchData(...))
}
}

如果我在组件生命周期的后期调度相同的操作，那么一切正常，效果就会发生。

在Redux DevTools中，我可以看到动作调度发生在effects init之前。顺序如下：

@ngrx/store/init
[API] fetch data // this is the fetch data action
@ngrx/effects/init

所以我的问题是如何在构造组件之前强制初始化效果。

更新

我还没有解决上面提到的问题，但现在，我决定使用ROOT_EFFECTS_INIT，(感谢@mitschmidt提到它(，并在effects准备好初始化我的应用程序状态后调度一系列操作。以下是使用ROOT_EFFECTS_INIT的效果：

init$ = createEffect(() =>
this.actions$.pipe(
ofType(ROOT_EFFECTS_INIT),
map(action => CoverageUIActions.apiFetchData({...}))
)
);

Answer 1

为了实现这一点，您可能需要查看 NGRX 生命周期事件，例如如下所述的ROOT_EFFECTS_INIT：https://ngrx.io/guide/effects/lifecycle

使用APP_INITIALIZER注入令牌(此处的良好教程(以及必要的语法糖，您可以构造一个应用初始值设定项服务，该服务会延迟应用引导，直到注册 NGRX 根效应(在这种情况下，不会初始化任何组件，构造函数中的上述逻辑应该可以工作(。 在最近的一个项目中，我走上了类似的道路：

export class AppInitializer {
constructor(private readonly actions$: Actions) {}
initialize() {
return this.actions$.pipe(ofType(ROOT_EFFECTS_INIT));
}
}

return (): Promise<any> => {
return appInitializer.initialize().toPromise();
};
}

。最后将提供程序添加到模块中：

import { appInitializerFactory } from './app-initializer.factory';
export const APP_INITIALIZER_PROVIDER: Provider = {
provide: APP_INITIALIZER,
useFactory: appInitializerFactory,
deps: [AppInitializer],
multi: true,
};

// your module...
{
...
providers: [APP_INITIALIZER_PROVIDER]
...
}