NGXS仅返回所需值问题：订阅时如何只获取token和username？

嘿，这个问题咱们有几个实用的解决办法，根据你的需求选就行：

方法1：让Action返回你需要的数据 #

你可以在Action的Observable链里添加map操作，直接返回token和username，这样订阅dispatch时拿到的就是这两个值，而不是整个Store。

修改你的Action代码：

@Action(Login) 
login(ctx: StateContext<AuthStateModel>, action: Login) { 
  return this.authService.login(action.payload).pipe(
    tap((result: { token: string }) => { 
      ctx.patchState({ 
        token: result.token, 
        username: action.payload.username 
      }); 
    }),
    // 这里添加map，返回你需要的结构
    map(() => {
      const currentState = ctx.getState();
      return { 
        token: currentState.token, 
        username: currentState.username 
      };
    })
  ); 
}

然后订阅时就能直接拿到目标数据：

this.store.dispatch(new Login(loginPayload)).subscribe((userData) => {
  console.log(userData); // 输出 { token: "...", username: "..." }
});

方法2：用状态选择器(Selector)订阅指定切片 #

如果需要持续监听这两个字段的变化（比如用户后续修改信息），更推荐用NGXS的Selector来精准获取状态片段。

方式A：在State中定义专属选择器 #

先在你的AuthState里添加一个选择器方法：

export class AuthState {
  // ... 其他代码

  // 定义选择器，只返回需要的字段
  static selectAuthUserData(state: AuthStateModel) {
    return {
      token: state.token,
      username: state.username
    };
  }
}

然后在组件中订阅这个选择器：

import { Select } from '@ngxs/store';
import { AuthState } from './auth.state';
import { Observable } from 'rxjs';

// ... 组件代码

@Select(AuthState.selectAuthUserData) 
authUserData$!: Observable<{ token: string; username: string }>;

// 在组件初始化或模板中订阅
ngOnInit() {
  this.authUserData$.subscribe(userData => {
    // 这里拿到的就是你要的token和username
  });
}

方式B：在组件中直接转换状态 #

如果不想修改State文件，也可以在组件里对整个Auth状态做映射：

@Select(AuthState) authState$!: Observable<AuthStateModel>;

// 转换状态，只保留需要的字段
authUserData$ = this.authState$.pipe(
  map(state => ({
    token: state.token,
    username: state.username
  }))
);

方法3：订阅后手动获取状态切片 #

如果只是在dispatch完成后一次性获取数据，可以在subscribe回调里用selectSnapshot直接提取需要的字段：

this.store.dispatch(new Login(loginPayload)).subscribe(() => {
  const authState = this.store.selectSnapshot(AuthState);
  const { token, username } = authState;
  // 在这里使用token和username
});

各方法适用场景 #

• 方法1：适合只需要本次dispatch成功后一次性数据的场景；
• 方法2：适合需要持续监听状态变化的场景（比如页面需要实时展示用户信息）；
• 方法3：简单粗暴的一次性获取，适合快速实现但不需要响应式更新的场景。

内容的提问来源于stack exchange，提问作者Sprep