angular5 - Obervable.create 未在 angular5 中使用 ngrx 触发

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日志永远不会触发。我做错了什么？

标签： angular5observablengrx

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 就是这种情况。

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