Angular 6 NGRX 分页，如何定义高级分页的操作

Question

我有一个带有 NgRx 的 Angular 6 应用程序，但我在如何正确定义操作和状态方面遇到了问题。

行动：

export class LoadUsers implements Action {
    readonly type = UserActionTypes.LoadUsers;
    constructor(public payload: { pagination: Pagination }) {
    }
}
export class LoadUsersSuccess implements Action {
    readonly type = UserActionTypes.LoadUsersSuccess;
    constructor(public payload: { users: User[], pagination: Pagination}) {
    }
}

分页界面：

export interface Pagination {
    pageSize?: number;
    pageIndex?: number;
    orderBy?: string;
    dir?: string;
    filter?: string;
}

状态：

export interface State {
    pagination: Pagination;
    users: User;
}

减速器：

export function reducer() {
switch (action.type) {
        case UserActionTypes.LoadUsersSuccess: {
            return {
                ...state,
                pagination: action.payload.pagination,
                users: action.payload.users
            };
        }
    }
}

和效果：

@Effect()
loadUsers$ = this.actions$.pipe(
    ofType(UserActionTypes.LoadUsers),
    map((action: LoadUsers) => action.payload.pagination),
    switchMap((pagination: Pagination) => {
        return this.usersService.getUsers(pagination).pipe(
            map((response: any) => {
                const payload = {
                    users: response.users,
                    pagination: pagination,
                };
                return new LoadUsersSuccess(payload);
            }),
            catchError((error) => of(new LoadUsersFail()))
        );
    })
);

例如，问题出在我想从商店显示用户的组件中。首先，我应该调度操作 LoadUsers 但对于哪些参数？对于来自商店的实际分页参数？但是当我订阅它时，每次修改它时，都会再次调度 LoadUsers 操作。也许对于来自 initialState 的分页参数，但这是一个好方法吗？

这是实现分页的正确方法还是我应该定义像 ChangePaginationParams() 这样的操作，它在 reducer 中分配新的分页参数来存储和加载新参数的用户的效果？但是在效果会出现错误的情况下该怎么办，如果它以某种方式逆转存储中的更改，因为用户不适合存储中的分页参数。

也许您可以为我提供真实世界的解决方案，一个使用 NgRx 完成分页的应用程序示例？

Answer 1

ChangePaginationParams似乎更适合我的眼睛。如果提取失败，您可以撤消该ChangePaginationParams操作，例如，当提取请求无法加载下一页时返回上一页。

初始加载将是第 0 页，50 个项目（例如）。

请记住，分页对于您想要使用的解决方案来说是非常主观的。

有关示例，请参阅此GitHub 线程。