使用angularngrx store effects通过id查询数据
Using angular ngrx store effects to query data by id
我正在使用 ngrx 6 和 angular 6,我的代码如下所示:
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()
)
})
}
)
);
项目-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[] }) {}
}
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
}
}
`;
给定的graphql API在graphql playground上看到如下
query{
findAllProjectMembers(projectId: projectID) {
id
memberId
memberType
}
}
如果你把上面的projectID换成数字eg:2就可以查询成功
url其中要在1号上使用的Project ID通过下面的URL
http://localhost/project-manager/view-project/2/members
我需要帮助来提取上面的项目 ID 并在效果文件中使用它来查询成员列表
我会说。
//更新项目-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()
)
})
}
)
);
// 可能在组件中或者你调度 action 的地方传递 projectId
subscribe to router {
this.store.dispatch(new GetProjectMembers({ projectId })
}
我正在使用 ngrx 6 和 angular 6,我的代码如下所示:
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() ) }) } ) );
项目-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[] }) {} }
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 } } `;
给定的graphql API在graphql playground上看到如下
query{ findAllProjectMembers(projectId: projectID) { id memberId memberType } }
如果你把上面的projectID换成数字eg:2就可以查询成功
url其中要在1号上使用的Project ID通过下面的URL
http://localhost/project-manager/view-project/2/members
我需要帮助来提取上面的项目 ID 并在效果文件中使用它来查询成员列表
我会说。
//更新项目-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()
)
})
}
)
);
// 可能在组件中或者你调度 action 的地方传递 projectId
subscribe to router {
this.store.dispatch(new GetProjectMembers({ projectId })
}