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 thread。