推广NGRX效果的功能

时间:2019-03-15 18:48:46

标签: angular typescript ngrx ngrx-effects

我有以下效果代码:

@Effect() public setupFirstAccess$ = this.actions$
    .ofType<usersActions.SetupUserAccessAction>(usersActions.SETUP_USER_ACCESS).pipe(
        switchMap(action => this.usersService.setupUserAccess(action.payload)
            .pipe(
                map(() => new usersActions.SetupUserAccessSuccessAction()),
                catchError(error =>
                    {
                        return of(new applicationActions.ShowHttpResponseError(
                            {
                                error: error,
                                nextAction: new usersActions.SetupUserAccessFailureAction()
                            }
                        ));
                    }
                )
            )
        ));

我在很多效果中都使用了这种效果结构,所以我试图添加一个这样的函数:

protected createSimpleEffect<T>(data: {
    type: string,
    dataFetchFunction: (action: Action) => Observable<T>,
    successFunction: (result: any, action:  Action) => void,
    failureFunction: (action:  Action) =>  Action
}): Observable<any>
{
    return this.actions$
        .ofType(data.type).pipe(
            switchMap(action => data.dataFetchFunction(action)
                .pipe(
                    map((result: any) => data.successFunction(result, action),
                    catchError(error =>
                        {
                            return of(new applicationActions.ShowHttpResponseError(
                                {
                                    error: error,
                                    nextAction: data.failureFunction(action)
                                }
                            ));
                        }
                    )
                )
            ))
        );
}

我这样称呼它:

@Effect() public setupUserAccess$ = this.createSimpleEffect<void>({
    type: usersActions.SETUP_USER_ACCESS,
    dataFetchFunction: (action: usersActions.SetupUserAccessAction) => this.usersService.setupUserAccess(action.payload),
    successFunction: (result, action) => new usersActions.SetupUserAccessSuccessAction(),
    failureFunction: (action) => new usersActions.SetupUserAccessFailureAction()
});

原始代码有效,该效果触发用户服务,然后调用成功操作,如果我在请求中遇到错误,则会调用catchError运算符。

备用版本确实可以触发用户服务,但是当我在后端出错时,它没有在catchError运算符上执行代码。

在将代码重构为函数时,我是否将可观察对象弄乱了?

0 个答案:

没有答案