Angular 6 NGRX нумерация страниц, как определить действия для расширенной нумерации страниц - PullRequest
Новая
       77

Angular 6 NGRX нумерация страниц, как определить действия для расширенной нумерации страниц

0 голосов
/ 03 октября 2018

У меня есть приложение angular 6 с ngrx, и у меня проблемы с тем, как правильно определить действия и состояние.

Действия: 

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 (), которое в редукторе назначает новые параметры пагинации для хранения и эффект загрузки пользователейдля этого новых параметров?Но что делать в ситуации, когда эффект будет иметь ошибку, если он каким-то образом обратит изменения в магазине, потому что пользователи не подойдут для параметров пагинации в магазине.

Может быть, вы можете предоставить мне реальное решение, пример приложениягде нумерация страниц осуществляется с помощью ngrx?

1 Ответ

0 голосов
/ 03 октября 2018

ChangePaginationParams кажется мне лучше подходит.Если выборка не удалась, вы можете отменить действие ChangePaginationParams, например, вернуться на одну страницу, если запрос на выборку не смог загрузить следующую страницу.

Первоначальной загрузкой будет страница 0, 50 элементов (например).

Имейте в виду, что разбиение на страницы очень субъективно для решения, которое вы хотите использовать.

См. Этот поток GitHub для примеров.

...