如何在Angular NgRx效果中进行http调用之前调度动作？

Question

First i want to return the Action Token, after that i want to make an http call where i dispatch another action. I don't know how to return two things.

@Effect()
  login$ = this.actions$.pipe(
    ofType(AuthActionTypes.LOGIN),
    map(userData => userData.payload),
    exhaustMap((user: any) => {
      return this.userService.login(user.username, user.password)
        .pipe(
            map((res: any) => {
              console.log('authorization' + res.headers.get('Authorization'));
              return new Token({
                token: {
                  token: res.headers.get('Authorization')
                }
              }),
              return this.http
                .get(`${this.restServiceRoot}${this.currentUserRestPath}`)
                .pipe(
                  map((response: any) => {
                    return new LoginSuccess({
                      user: {
                        user: response.name,
                        role: response.role,
                      }
                    });
                  }),
                );
            })
            );
    }),
    catchError(error => of(new LoginFail({error: error})))
  );

Answer 1

There two ways to solve it - 1.

@Effect
login$ = this.actions$.pipe(
    ofType(AuthActionTypes.LOGIN),
    map(userData => userData.payload),
    exhaustMap((user: any) => {
      return this.userService.login(user.username, user.password)
        .pipe(
            mergeMap((res: any) => {
              console.log('authorization' + res.headers.get('Authorization'));
              this.store.dispatch(new Token({
                token: {
                  token: res.headers.get('Authorization')
                }
              }));              
              return this.http
                .get(`${this.restServiceRoot}${this.currentUserRestPath}`)
                .pipe(
                  map((response: any) => {
                    return new LoginSuccess({
                      user: {
                        user: response.name,
                        role: response.role,
                      }
                    });
                  }),
                );
            })
            );
    }),
    catchError(error => of(new LoginFail({error: error})))
  );

OR In your Login Action you return token action to update the token in your store and one more action to fetch the resource from "${this.restServiceRoot}${this.currentUserRestPath}". In the effect of the second action call your http using "${this.restServiceRoot}${this.currentUserRestPath}" [consider below code as psuedo code - PLEASE NOTE - For some reason code formatting is not working so copy paste the code in your editor]-

@Effect()
login$ = this.actions$.pipe(
ofType(AuthActionTypes.LOGIN),
    map(userData => userData.payload),
    exhaustMap((user: any) => {
      return this.userService.login(user.username, user.password)
        .pipe(
            mergeMap((res: any) => {
              console.log('authorization' + res.headers.get('Authorization'));
              return [new Token({
                token: {
                  token: res.headers.get('Authorization')
                }
              }), new GetCurrentUserRestPath()]
              )         
            );
    }),
    catchError(error => of(new LoginFail({error: error})))
  );

@Effect()
  login$ = this.actions$.pipe(
    ofType(AuthActionTypes.GET_CURRENT_USER_REST_PATH),    
    switchMap((user: any) => {
      return this.http
      .get(`${this.restServiceRoot}${this.currentUserRestPath}`)
      .pipe(
        map((response: any) => {
          return new LoginSuccess({
            user: {
              user: response.name,
              role: response.role,
            }
          });
        }),
      );
    }),
    catchError(error => of(new LoginFail({error: error})))
  );

Hoe this will give you an idea of how to solve your problem.