NGRX dispatch 和 select 的执行顺序

Question

我有一个发布按钮，它将触发 addPost() 方法来调度操作（将帖子添加到服务器），然后选择添加的帖子 ID。我有一个 Add_Success 减速器将添加的帖子 ID 分配到 selectedPostId 中，getCurrentPostHeaderId 选择器将使用它。

我期望的正确执行顺序是： 1. 调度 AddPost 动作 2.选择添加的帖子Id

但第一次执行后顺序总是出错： 1.选择上一篇文章Id 2. 调度 AddPost 动作 3.选择添加的帖子Id

在第一次运行时，执行是正确的，动作被调度并且正确添加的 id 显示在日志中。

但是如果我在第一次运行后立即添加另一个帖子，似乎旧的选择器将首先执行，并且会显示以前的 id。在此之后，只会成功添加新帖子并选择新帖子ID。

我的组件：

addPost() {
const postStatus = Object.assign({}, this.newPostForm.value);
let postHeader: any = {};

postHeader.postStatus = postStatus;

this.store.dispatch(new postHeaderActions.AddToPost(postHeader)); //Add post

this.store.select(
  fromPost.getCurrentPostHeaderId
)
.subscribe((post) => {
  if (post) {
      console.log(post); //Return the new added post id
  }
});
}

我的减速器和选择器：

case ActionTypes.Add_Success: {
        console.log('hey');
        return postHeaderAdapter.addOne(action.payload, {
            ...state,
            selectedPostId: action.payload.id,
            loaded: true
        });
    }

export const getCurrentPostHeaderId = createSelector(
    getPostHeaderFeatureState,
    (state: PostHeaderState) => state.selectedPostId
);

多次运行也是如此，你可以看到从第二次运行开始，它会在显示新的 Id 之前返回之前的 Id。

谁能帮我解决这个问题？谢谢

Answer 1

只监听下一个 id 的一种方法是只在 id 改变时才监听：

this.store.select(
  fromPost.getCurrentPostHeaderId
)
   .pipe(distinctUntilChanged())
   .subscribe(...)