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;
}

reducer :

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 thread举些例子。