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

Question

我使用的是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.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. 给定的graphql API在graphql游乐场上如下所示

   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()
)
})
}
)
);

//可能在组件中或您调度动作的位置Pass projectId

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