在组件的构造函数中调度操作时，不会调用ngrx效果
在组件的构造函数中调度操作时，不会调用ngrx效果
提问于 2020-01-10 03:33:34
以下是我的应用程序模块：
@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()))
)
)
));
}现在如果我在SampleComponent构造函数中调用apiFetchData操作，效果就不会被调用：
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({...}))
)
);回答 1
Stack Overflow用户
发布于 2020-01-10 05:05:51
为了实现这一点，您可能需要查看NGRX生命周期事件，比如这里描述的ROOT_EFFECTS_INIT：https://ngrx.io/guide/effects/lifecycle
使用APP_INITIALIZER注入令牌(好的教程here)加上必要的语法糖，你可以构造一个应用初始化器服务，它会延迟你的应用引导，直到注册了NGRX root效果(在这种情况下，不会初始化任何组件，并且上面构造函数中的逻辑应该可以工作)。在最近的一个项目中，我走了一条类似的道路：
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]
...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59670943
复制相关文章
相似问题
腾讯云开发者
