從 ngrx store pipe 選擇器返回 Observable

Question

我有一個 ngrx 商店選擇器：

export const selectActivePracticeUsersListSnapshot = pipe(
  select(selectPracticeUsersList),
  filter((users) => !!users),
  take(1),
  map((users) => users.filter((user) => user.active))
);

我有一個注入到包含以下方法的多個組件的服務：

public getTeamMembersWithAccess(permission: string): string[] {
  let flagAvatars: string[];
  this.store.dispatch(loadUsers());
  this.store.pipe(selectActivePracticeUsersListSnapshot).subscribe((activePracticeUsers) => {
    flagAvatars = activePracticeUsers.reduce((teamMembers, activeUser) => {
      if (!!activeUser.permissions[permission]) {
        const { firstName, lastName } = activeUser;
        return [...teamMembers, `${firstName} ${lastName}`];
      }
      return teamMembers;
    }, []);
  });
  return flagAvatars;
}

我從我的組件中這樣稱呼它：

constructor(private helperService: HelperService) {
  const flagAvatars = this.helperService.getTeamMembersWithAccess('AdminPage');
}

我的問題是服務方法返回 undefined 因為let flagAvatars: string[]; 在對商店選擇器的訂閱返回之前，因為它正在等待loadUsers()的調度完成。 我知道我需要更改getTeamMembersWithAccess()方法以以某種方式返回Observable<string[]> ，但我不確定如何編寫它。 我已經嘗試了多種方法，但無法正確處理。 很確定我需要使用 map 而不是訂閱，但就是不知道如何寫。

Answer 1

您的陳述完全正確，我將協助您使其具體化。

試試這個：

服務：

import { map } from 'rxjs/operators';
......
public getTeamMembersWithAccess(permission: string): Observable<string[]> {
  this.store.dispatch(loadUsers());
  this.store.pipe(selectActivePracticeUsersListSnapshot).pipe(
   map((activePracticeUsers) => {
    // flagAvatars equals this, so let's just return it right away in the map
    return activePracticeUsers.reduce((teamMembers, activeUser) => {
      if (!!activeUser.permissions[permission]) {
        const { firstName, lastName } = activeUser;
        return [...teamMembers, `${firstName} ${lastName}`];
      }
      return teamMembers;
    }, []);
   });
  )
}

消費它：

this.helperService.getTeamMembersWithAccess('AdminPage').subscribe(data => {
  console.log(data);
});