Ngrx серверная нумерация страниц с параметрами маршрутизатора

Question

У меня есть магазин с упрощенным деревом состояний:

{
    routerReducer: {
        state: {
            url: '/blog'
        },
        queryParams: {
            category: 'home'
        }
        params: { }
    },
    blog: {
        posts: {
            entities: { ... }
            loading: false,
            loaded: false,
            pagination: {
                sort: 'date',
                filters: {
                    category: 'home',
                    tag: 'testTag'
                },
                page: 1
            }
        }
    }
}

По сути, я хотел бы передать состояние моего маршрутизатора в состояние моего блога для нумерации страниц, но только если текущий URL принадлежит этому модулю, если это имеет смысл? Часть разбиения на страницы моего блога -> сообщения будет основываться на параметрах URL, уже составленных в моем состоянии. Возможно, это не правильный метод, так как у меня больше не будет единого источника правды? Но я бы хотел использовать это состояние пагинации, чтобы по существу описать набор сущностей, которые у меня есть в моем магазине. Это означает, что если я перемещаю страницы или меняю фильтры, я планирую очистить все сущности и обновить содержимое с нумерацией страниц (выполняется на стороне сервера) из моего API.

Я предположил, что мой поток будет выглядеть так:

• Событие навигации маршрутизатора, например / blog / 2 (страница 2 через queryParam)

• Действие маршрутизатора отправляется и обрабатывается редуктором маршрутизатора для обновления. эта часть моего дерева состояний

• Побочный эффект, вызванный событием навигации маршрутизатора, и если URL совпадает мой модуль блога, например "/ blog / *" (также может содержать параметры URL, например, ? category = home) создадим наше локальное состояние нумерации страниц в дереве моего блога, а затем отправим действие loadPosts, которое будет основано на этом фрагменте состояния

Как звучит этот поток? Это правильный способ сделать это?

Answer 1

1) Звучит выполнимо.

2) Нет. Что бы ни делали работу.

Что бы я сделал

Я бы создал блог postPagination, в котором я бы держал данные нумерации страниц отдельно от сущностей. И действие BlogPaginate для изменения его состояния в функции редуктора.

{
   {
        sort: 'date',
        filters: {
            category: 'home',
            tag: 'testTag'
        }
    },
    page: 1
}

Я бы сделал эффект, который прослушивает действия маршрутизатора и сопоставляет соответствующие (url / blog / *) с соответствующими поисковыми фильтрами для действия BlogPaginate, которое, в свою очередь, вызовет вызов службы.

Если вы хотите кэшировать эти объекты

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

Тогда я бы добавил к состоянию postPagination:

{
   pageContents: {
      // map of page to entity ids
      1: [1,8,222]
   }
   {
        sort: 'date',
        filters: {
            category: 'home',
            tag: 'testTag'
        }
    },
    currentPage: 1,
    totalPages: 10
}

• При изменении параметров разбивки на страницы / сортировки в редукторе BlogPaginate я должен очистить pageContents.
• Когда в редукторе BlogPaginateSuccess изменится значение totalPages ответа на нумерацию страниц, я очистлю другие страницы контекста.
• В редукторе BlogPaginateSuccess я добавляю / обновляю новые сущности в сообщениях блога и сопоставляю их идентификаторы как pageContents. Помните, что редукторы могут реагировать на любые действия.
• Я бы также создал селектор, который отображает postPagination.currentPage, postPagination.pageContents и post.entities в массив объектов блога.