[英]Object id not added to ngrx store entity
我從嘗試添加到商店的后期效果操作中獲得了一系列帖子。 問題是只添加了數組中的第一個帖子 object ,並且錯誤地添加了 id (它從后端返回為 _id ,但我對組實體有相同的設置,它工作得很好, id 是根據 the_id 屬性自動添加的)。 任何幫助將非常感激。
后期效果:
getGroupPosts$ = createEffect(() =>
this.actions$.pipe(
ofType(PostActions.getGroupPosts),
switchMap(action => {
return this.http
.get<{ posts: Post[] }>
(`${BACKEND_URL}/posts/${action.groupId}?pageSize=${action.pageSize}¤tPage=${action.pageNumber}`)
.pipe(
map(response => {
this.store.dispatch(GroupActions.groupPostsLoaded({ groupId: action.groupId }));
return {
type: PostActions.GET_GROUP_POSTS_SUCCESS,
posts: response.posts
};
}),
catchError(err => this.handleError(err, PostActions.GET_GROUP_POSTS_FAILED))
);
})
)
);
getGroupPostsSucess$ = createEffect(() =>
this.actions$
.pipe(
ofType(PostActions.getGroupPostsSuccess),
map(action => {
return {
type: SpinnerActions.STOP_SPINNER
};
})
)
);
后減速器:
import { EntityState, createEntityAdapter } from '@ngrx/entity';
import { Post } from 'src/app/models/post.model';
import { createReducer, on } from '@ngrx/store';
import * as PostActions from './post.actions';
export interface PostState extends EntityState<Post> { }
export const adapter = createEntityAdapter<Post>();
export const initPostsState = adapter.getInitialState();
export const postReducer = createReducer(
initPostsState,
on(PostActions.createPostSuccess, (state, action) => {
return adapter.addOne(action.post, { ...state });
}),
on(PostActions.getGroupPostsSuccess, (state, action) => {
console.log(action);
return adapter.addMany(action.posts, { ...state });
})
);
export const {
selectAll,
} = adapter.getSelectors();
群體效應:
getTopicGroups$ = createEffect(() =>
this.actions$
.pipe(
ofType(GroupActions.getTopicGroups),
switchMap(action => {
this.topic = action.topic;
return this.http
.get<{ groups: Group[], count: number }>(
`${BACKEND_URL}/groups/${this.topic}?pageNumber=${action.pageNumber}&pageSize=${action.pageSize}`)
.pipe(
map(response => {
return {
type: GroupActions.GET_TOPIC_GROUPS_SUCCESS,
groups: response.groups,
topic: this.topic,
count: response.count,
groupsLoaded: response.groups.length
};
}),
catchError(err => this.handleError(err, GroupActions.GET_TOPIC_GROUPS_FAILED))
);
})
)
);
getTopicGroupSuccess$ = createEffect(() =>
this.actions$
.pipe(
ofType(GroupActions.getTopicGroupsSuccess),
map(action => {
return {
type: SpinnerActions.STOP_SPINNER
};
})
)
);
組減速器:
export interface GroupState extends EntityState<Group> {
topicsLoaded: {
topic: string,
count: number,
groupsLoaded: number
}[];
}
export const adapter = createEntityAdapter<Group>();
export const initialGroupState = adapter.getInitialState({
topicsLoaded: []
});
export const groupReducer = createReducer(
initialGroupState,
on(GroupActions.getTopicGroupsSuccess, (state, action) => {
let oldTopics;
let newTopics;
// Check if 1st batch of groups have already been loaded //
const oldGroupsLoaded = state.topicsLoaded.find(g => g.topic === action.topic);
if (!oldGroupsLoaded) {
// Add topic to group entity //
newTopics = [...state.topicsLoaded];
newTopics.push({
topic: action.topic,
count: action.count,
groupsLoaded: action.groupsLoaded
});
} else {
// Update group entity //
const index = [...state.topicsLoaded].indexOf(oldGroupsLoaded);
oldTopics = [...state.topicsLoaded];
oldTopics[index] = {
...state.topicsLoaded[index],
groupsLoaded: state.topicsLoaded[index].groupsLoaded + action.groupsLoaded
};
}
return adapter.addMany(action.groups,
{
...state,
topicsLoaded: oldGroupsLoaded ? oldTopics : newTopics
});
}),
好吧,事實證明你必須為實體適配器上的 selectId 屬性創建一個方法......但是如果你向它添加屬性(比如在組實體適配器中),你就不會這樣做
export interface PostState extends EntityState<Post> {
selectPostId: string;
}
export const selectPostId = (post: Post) => post._id;
export const adapter = createEntityAdapter<Post>({
selectId: selectPostId
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.