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

【问题标题】：Angular 6 NGRX pagination, how define actions for advanced paginationAngular 6 NGRX 分页，如何定义高级分页的操作
【发布时间】：2021-03-16 08:20:59
【问题描述】：

我有一个带有 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() 这样的动作，它在减速器中分配新的分页参数来存储，其效果是为新参数加载用户？但是在效果出现错误的情况下该怎么办，如果它以某种方式反转存储中的更改，因为用户不适合存储中的分页参数。

也许你可以给我提供一个现实世界的解决方案，一个使用 NgRx 完成分页的应用示例？

【问题讨论】：

只需使用Akita，您将免费获得这个。 netbasal.gitbook.io/akita/plugins/server-side-pagination
此链接无法访问

标签： angular pagination ngrx

【解决方案1】：

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

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

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

有关示例，请参阅此GitHub thread。

【讨论】：