Использование угловых эффектов хранилища ngrx для запроса данных по id - PullRequest
Новая
       12

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

0 голосов
/ 29 ноября 2018

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

  1. effect.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.log(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
  }
}

    Если вы замените вышеуказанный идентификатор проекта на число, например: 2, он успешно запросит данные

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

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

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

1 Ответ

0 голосов
/ 29 ноября 2018

Я бы сказал.

// update 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.log(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 })
}
...