Question

我的效果是：

  @Effect({dispatch: false})   /* 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 permissions = res.roles
                this.tokenService.setUserRoles(permissions)
                return Observable.create(observer => {
                  console.log('in observable')
                  this.permissionsService.loadPermissions(permissions, () => {
                    observer.next({
                      type: 'string'
                    });
                    console.log('here we go')
                    this.store.dispatch(new LoginActions.LoginSuccessAction({user: res}))
                    return observer.complete();

                  })
                })
            }
          })
          .catch( (e:any)  => {
            this.store.dispatch(new LoginActions.LoginFailureAction(true));

            return Observable.create(observer => {
              return observer.complete();
            }) 
        });
      });

in observable日志永远不会触发。我在做什么错？

Answer 1

对不起，但我不明白为什么您需要创建一个新的Observable。

在这种情况下，这是我惯常做的事情：

  @Effect()
  login$ = this.actions$
    .ofType<LoginAction.LoginAction>(LoginActions.LOGIN_ACTION)
    .pipe(
      map(action => action.payload),
      switchMap(payload => {
        return this.loginHttpService.login(payload)
          .map(userLogged => {
            return new LoginActions.LoginSuccessAction({user: userLogged});
          })
          .catch(error => {
            return new LoginActions.LoginFailureAction(true);
          });
      })
    );

  @Effect()
  loginSuccess$ = this.actions$
    .ofType<LoginAction.LoginSuccess>(LoginActions.LOGIN_SUCCESS)
    .pipe(
      map(action => action.payload),
      switchMap(payload => {
        return this.permissionsService.loadPermissions(payload.user)
          .map(permissions => {
            return new LoginActions.PermissionsLoaded(permissions);
          })
          .catch(error => {
            return new LoginActions.PermissionsLoadingFailed();
          })
        })
    );

如果现有的loadPermissions方法没有返回Observable，则可以使用下面的新方法来完成这项工作：

loadPermissions(user): Observable<Permissions> {
   return Observable.create(observer => {
      loadPermissionsWithCallback(user, (response) => {
         observer.next(response);
         return observer.complete();
      });
   });
}

这是一连串的动作。 LOGIN_ACTION-> LOGIN_SUCCESS-> PERMISSIONS_LOADED。调度动作PERMISSIONS_LOADED时，用户已完全登录。每个服务方法（login和loadPermissions）都应返回一个Observable，而新的HttpClientModule就是这种情况。

当然，这只是一个简化且不完整的示例……希望对您有所帮助。

Obervable.create无法使用ngrx在

1 个答案: