如何使用 Angular 8 NgRx 函数方法分派另一个有效的操作？

Question

我的开发环境没有提示问题（全绿），但是运行的时候出现了错误。（我会得到 http404 和 cacheError 会运行。现在很好 "error test"。）

错误信息：ERROR TypeError: "You provided '() => ({ type })' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. 我明白了，但我想发送 loginFailed 一个没有道具的动作。

HttpIntercept 存在！所以 url 将是 http://localhost:PORT/user/login。只是没有。

actions.ts

// imports

export const types = {
    loginStart: '[User] Login start',
    loginSuccess: '[User] Login success',
    loginFailed: '[User] Login fail',
};

export const loginStart = createAction(types.loginStart, props<ILogin>());
export const loginSuccess = createAction(types.loginSuccess, props<IUser>());
export const loginFailed = createAction(types.loginFailed);

effect.ts

import { types } from './actions';
import * as fromActions from './actions';
// and more imports

@Injectable()
export class UserEffects {
    constructor(
        private actions$: Actions,
        private http: HttpClient,
        private router: Router,
    ) {
    }

    loginProcess = createEffect(() => this.actions$.pipe(
        ofType(types.loginStart),
        exhaustMap((action) => {
            return this.http.post<IUser>('/user/login', {
                username: action.username,
                password: action.password,
            }).pipe(
                map(data => {
                    console.log(data);
                    return fromActions.loginSuccess(data);
                }),
                catchError((err) => { // this will run
                    console.log(err);
                    return fromActions.loginFailed;
                }),
            );
        })
    ));
}

Answer 1

catchError expects you to return an observable so perhaps try something like this using of:

catchError((err) => { // this will run
    console.log(err);
    return of(fromActions.loginFailed());
}),

Answer 2

奇怪的是你在编译时没有收到错误，但我认为这可能是因为 RxJS catchError 运算符期望返回一个可观察对象。

类似于 =>

catchError(err =>
  of(featureActions.LoadFailureAction({ err }))
),

运行前一段时间研究了这个问题，发现这篇来自 Wes Grimes（Google Angular 的开发专家和 NgRx 核心团队成员）的文章真的很有帮助。 https://itnext.io/ngrx-best-practices-for-enterprise-angular-applications-6f00bcdf36d7

如何使用 Angular 8 NgRx 函数方法分派另一个有效的操作？

How can I dispatch another action in effect with Angular 8 NgRx function method?

angular

typescript

ngrx-effects