代码之家 › 专栏 › 技术社区 › panagulis72

NGRX呼叫服务器就在末尾

ngrx-effects ngrx angular-promise redux angular

panagulis72 · 技术社区 · 7 年前

在Angular应用程序中,我有一个从服务器检索可用语言的效果(在应用程序启动时处理)。我要拯救 朗[] 在对象内部( 全球数据 )保存在应用程序存储区中。在登录组件中,我订阅了属性 ISFETChinglangs公司 ,一个布尔值,如果为真,将禁用登录。因此影响的步骤如下:

从商店买GlobalData
如果有语言设置 ISFETChinglangs公司 错误并保存创建globaldata的事实;否则调用服务;
准备要调度的操作:如果globaldata不存在,我添加langs并添加保存globaldata的操作。设置 ISFETChinglangs公司 错误

这是代码:

coreActions$ = this.actions$
    .ofType(CoreActions.GET_AVAILABLE_LANGS)
    .pipe(
        withLatestFrom(this.store.select(fromApp.getGlobalData))
        , take(1) 
        , map(([action, storeState]) => {
            if (storeState && storeState.langs && storeState.langs.length) {
                this.globaDataCreated = true;
                return this.store.dispatch(new CoreActions.GetAvailableLangsFinished());
            } else {
                return from(this.langsService.getAvailableLangs());
            }
        })
        , mergeMap((langs: Lang[]) => {
            let actions = [];
            if (!this.globaDataCreated) {
                this.applicationUrl = this.urlService.getApplicationUrl();
                let newGlobalData = new GlobalData(
                    false,
                    null
                );

                langs.forEach(lang => {
                    newGlobalData.langs.push(lang)
                });
                this.translate.use('en');
                this.moment.tz.setDefault("UTC");
                actions.push({
                    type: CoreActions.SET_CORE_APPLICATION_DATA, 
                    payload: newGlobalData
                })
            }

            actions.push({
                type: CoreActions.GET_AVAILABLE_LANGS_FINISHED
            })

            return actions;
        })
        , catchError((err, caught) => { ...... }

服务:

getAvailableLangs(): any {
    return this.http.get<CommonClasses.SenecaResponse<CommonClasses.Lang[]>>(this.applicationData.applicationContext + 'rest-api/langs');
}

问题: 它进入MergeMap((langs:lang[])=>……然后将服务调用此.langsseservice.getAvailableLangs())

目标: 等待直到getAvailableLangs()完成,然后将isFetchingFlags设置为false并执行其他操作。

****** @janrecker answer后编辑的代码 *********

getAvaibleLang(storeState?: GlobalData) {
    if (storeState && storeState.langs && storeState.langs.length) {
        return this.store.dispatch(new CoreActions.GetAvailableLangsFinished());
    } else {
        return this.langsService.getAvailableLangs();
    }
}

@Effect()
coreActions$ = this.actions$
    .ofType(CoreActions.GET_AVAILABLE_LANGS)
    .pipe(
        withLatestFrom(this.store.select(fromApp.getGlobalData))
        , take(1) 
        , switchMap(([action, storeState]): Lang[] => this.getAvaibleLang(storeState))
        , mergeMap(
            (langs: Lang[]) => {
                if (langs) {
                    const applicationUrl = this.urlService.getApplicationUrl();
                    let newGlobalData = new GlobalData(
                        applicationUrl,
                        false,
                        null
                    );
                    langs.forEach(lang => {
                        newGlobalData.langs.push(lang)
                    });
                    this.translate.use('en');
                    return [{
                        type: CoreActions.SET_CORE_APPLICATION_DATA,
                        payload: newGlobalData
                    }, {
                        type: CoreActions.GET_AVAILABLE_LANGS_FINISHED
                    }];
                } else {
                    return [{
                        type: CoreActions.GET_AVAILABLE_LANGS_FINISHED
                    }];
                }
            }
        )
        , catchError((err, caught) => {....}

1 回复 | 直到 7 年前

JanRecker 7 年前

of('helloWorld').pipe(
    map((data:string):number => data.length) // data.length = 10
).subscribe(
    (data:number) => console.log(data) )  // 10
)

of('helloWorld').pipe(
    map((data:string):Observable<number> => from(data.length))
).subscribe(
    (data:Observable<number>) => ... )
)

coreActions$ = this.actions$
    .ofType(CoreActions.GET_AVAILABLE_LANGS)
    .pipe(
        withLatestFrom(this.store.select(fromApp.getGlobalData))
        , take(1)
        ,switchMap(([action,storeState]):Lang[] => this.getAvaibleLang(storeState) )
        ,tap(() => this.setApplicationUrl() )
        ,tap((langs:Lang[])=> this.setLanguages(langs) )
        ,tap(()=> this.pushLanguageAction() )
   )