Использование эффектов хранилища angular ngrx для запроса данных по идентификатору

Я использую ngrx 6 и angular 6, мой код выглядит следующим образом:

  1. эффекты.ts

    import * as fromProjectMemberActions from '../project-member/project-member.actions';
    import * as fromProjectMemberGraphQL from '../../members/members.graphql';
    
    @Effect({dispatch: false})
    loadProjectMember$ = this.actions$.pipe(
    ofType(fromProjectMemberActions.ProjectMemberActionTypes.GetProjectMembers),
    tap(
      action => {
        this.apollo.watchQuery({
          query: fromProjectMemberGraphQL.GET_ALL_PROJECT_MEMBERS,
          variables: { 
            projectID : // Project ID is needed
          }
        }).valueChanges.subscribe((response: any) => {
            console.info(response)
            this.store.dispatch(
              new fromProjectMemberActions.UpsertProjectMembers({
                projectMembers: response.data.findAllProjectMember
              })
            )
            this.store.dispatch(
                  new fromProjectMemberActions.DoneLoadingProjectMembers()
              )
        })
      }
    )
    );
    
  2. project-member.actions.ts

    export class GetProjectMembers implements Action {
      readonly type = ProjectMemberActionTypes.GetProjectMembers;
    }
    export class UpsertProjectMembers implements Action {
      readonly type = ProjectMemberActionTypes.UpsertProjectMembers;
        constructor(public payload: { projectMembers: ProjectMember[] }) {}
      }
    
  3. members.graphql.ts

    import gql from 'graphql-tag';
    
     export const GET_ALL_PROJECT_MEMBERS = gql`
     query getAllProjectMembers($projectID: Long!) {
        findAllProjectMembers(projectId: $projectID) {
          id
          memberId
          memberType
       }
     }
    `;
    
  4. Данный API-интерфейс graphql выглядит следующим образом на игровой площадке graphql

    query{
      findAllProjectMembers(projectId: projectID) {
        id
        memberId
        memberType
      }
    }
    

    Если вы замените projectID выше на число, например: 2, он будет успешно запрашивать данные.

  5. URL-адрес, по которому идентификатор проекта, который будет использоваться под номером 1, передается через следующий URL-адрес

    http://localhost/project-manager/view-project/2/members
    

Мне нужна помощь, чтобы извлечь этот идентификатор проекта, указанный выше, и использовать его в файле эффектов для запроса списка участников.

где вы отправляете действие типа (fromProjectMemberActions.ProjectMemberActionTypes.Get‌ ProjectMembers) в компоненте. ?

rijin 29.11.2018 15:20
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
4
1
437
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я бы сказал.

// обновляем project-member.actions.ts

export class GetProjectMembers implements Action {
  readonly type = ProjectMemberActionTypes.GetProjectMembers;
  constructor(public payload: { projectId: number }) {}
}

// и обновляем эффект

@Effect({dispatch: false})
loadProjectMember$ = this.actions$.pipe(
ofType(fromProjectMemberActions.ProjectMemberActionTypes.GetProjectMembers),
map((action: any) => action.payload),
tap(
  payload => {
    this.apollo.watchQuery({
      query: fromProjectMemberGraphQL.GET_ALL_PROJECT_MEMBERS,
      variables: { 
        projectID : payload.projectId
      }
    }).valueChanges.subscribe((response: any) => {
        console.info(response)
        this.store.dispatch(
          new fromProjectMemberActions.UpsertProjectMembers({
            projectMembers: response.data.findAllProjectMember
          })
        )
        this.store.dispatch(
              new fromProjectMemberActions.DoneLoadingProjectMembers()
          )
    })
  }
)
);

// может быть в компоненте или в том месте, где вы отправляете действие Pass projectId

subscribe to router {
  this.store.dispatch(new GetProjectMembers({ projectId })
}

Другие вопросы по теме