使用角度ngrx存储效果按id查询数据

Question

我使用的是ngrx 6和angular 6，我的代码如下：

1. effects.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. 项目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. 给定的graphql API在graphql playground上看如下

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

   如果将上面的projectID替换为数字，例如：2，它将成功查询数据

5. 要在数字1上使用的项目ID的URL通过以下URL传递

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

我需要帮助来提取上面的项目ID，并在效果文件中使用它来查询成员列表

Answer 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.log(response)
        this.store.dispatch(
          new fromProjectMemberActions.UpsertProjectMembers({
            projectMembers: response.data.findAllProjectMember
          })
        )
        this.store.dispatch(
              new fromProjectMemberActions.DoneLoadingProjectMembers()
          )
    })
  }
)
);

//可能在组件中或您调度操作的位置通过projectId

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