将数据附加到 Angular NGXS 中的状态

Question

我对如何添加新数据有疑问，因为我正在进行服务器端滚动。当新数据到达时，帖子正在删除旧数据，但我只想附加新数据而不是删除帖子中的旧数据

TS

  page = 1;

    constructor(private store: Store) {
        this.store.dispatch(new GetPostsPerPage('', this.page.toString()));
    }

     onScroll() {
        this.store.dispatch(new GetPostsPerPage('', (this.page += 1).toString()));
      }

State

@Action(GetPostsPerPage)
      getPostsPerPage(ctx: StateContext<PostStateModel>, { key, pageNumber }: GetPostsPerPage) {
        return this.postsService.getPostsPerPage(key, pageNumber).pipe(
          tap((result: Post[]) => {
            console.log(result);
            ctx.patchState({
              posts: result['data'],
            });
          }),
          catchError(err => {
            console.log(err);
            return throwError(err);
          })
        );
      }

Answer 1

修补状态时，需要将结果附加到当前状态值，而不是用 posts: result['data'] 覆盖它。

在您的 tap 运算符中，您可以使用跨页附加新帖子：

var currentPosts = ctx.getState().posts;
ctx.patchState({
 posts: [...currentPosts, ...result['data']]
});

NGXS 也有一些（相对较新的）内置 State Operators 可以更轻松地处理这些场景，具体请参阅 the documentation append 运算符。

将数据附加到 Angular NGXS 中的状态

Appending Data to State in Angular NGXS

angular

angular6

ngxs

angular-state-managmement