我如何从 Angular5 效果中的回调中 return？

Question

  @Effect()   /* sends request to httpService with params as login credentials on instance of loginAction. */
  login$: Observable<Action> = this.actions$
    .instanceOf(LoginActions.LoginAction)
    .switchMap(
      action => {
        return this.loginHttpService.login(action.payload)
          .map( (res: any) => {
            if (res && res.message !== 'Invalid Login') {
                const firstName = res.firstName;
                const lastName = res.lastName;
                this.tokenService.setToken(res.jwt);
                this.tokenService.setFirstName(firstName.charAt(0).toUpperCase() + firstName.slice(1));
                this.tokenService.setLastName(lastName.charAt(0).toUpperCase() + lastName .slice(1));
                this.tokenService.setId(res.id);
                this.tokenService.setAvatar(firstName.charAt(0).toUpperCase() + lastName.charAt(0).toUpperCase());

                const perm = ['ADMIN']
                this.tokenService.setUserRoles(perm)
                return Observable.create(observer => {
                  this.permissionsService.loadPermissions(perm, () => {
                    observer.next({
                      type: 'string'
                    });
                    return observer.complete();

                  })
                })
            }
          }).catch( (e:any)  =>    {
          return Observable.of(new LoginActions.LoginFailureAction(true));
        });
      });

我正在尝试从 loadPermissions 内部 return。但是我得到一个错误：

Effect "LoginEffects.login$" dispatched an invalid action

Answer 1

如果您试图在不发送操作的情况下退出效果，您需要将 disaptach 设置为 false。你用 @Effect({ dispatch: false }) 装饰你的效果，然后你 return 一个你需要自己调用 this.store.dispatch(/* Some Action */); 的动作。

@Effect({ dispatch: false })
login$: Observable<Action> = this.actions$
  .instanceOf(LoginActions.LoginAction)
  .switchMap(
    action => {
      this.loginHttpService.login(action.payload)
        .map( (res: any) => {
          if (res && res.message !== 'Invalid Login') {
            // Logic omitted
            this.permissionsService.loadPermissions(perm, () => {
             // Dispatch an action
             this.store.dispatch(new LoginActions.LoginSuccessAction(true)));
            });
          }
        }).catch( (e:any)  =>    {
          this.store.dispatch(new LoginActions.LoginFailureAction(true)));
        });
      });

constructor(private store: Store<any>) {}

我如何从 Angular5 效果中的回调中 return？

How can I return from a callback in an Angular5 effect?

angular

rxjs

ngrx

ngrx-effects