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操作。也许是从初始状态开始的分页参数，但这是一个好方法吗？

是实现分页的正确方法，还是应该定义诸如ChangePaginationParams（）之类的操作，该操作在reducer中分配新的分页参数进行存储，并且效果正在加载该新参数的用户？但是，如果用户以某种方式不适合使用商店中的分页参数，那么当效果会出现错误时，应该以某种方式逆转商店中的更改该怎么办？

也许您可以为我提供真实的解决方案，例如使用ngrx进行分页的应用示例？

Answer 1

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

初始加载为0页，例如50个项目。

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

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

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

1 个答案: