Как выбрать форму состояния Redux для приложения со списком/подробным просмотром и разбиением на страницы?

Предположим, у меня есть несколько записей (например, пользователей) в моей базе данных. У меня также есть два маршрута: один для списка, другой для деталей (где вы можете редактировать запись). Теперь я борюсь за подход к структуре данных.

Я думаю о двух подходах и о том, как они сочетаются.

Общий набор данных

Я перехожу к /list, все мои пользователи загружаются из api a, хранящегося в магазине redux, под ключом users, я также добавляю какие-то users_offset и users_limit, чтобы отображать только часть списка
Затем перейдите к /detail/<id> и сохраните currently_selected_user с помощью <id> в качестве значения val..., что означает, что я смогу получить мои пользовательские данные с чем-то вроде этого users.find(res => res.id === currently_selected_user)
обновление будет приятным и легким, так как я работаю с одним набором данных и деталями, указывающими на него.
добавление нового пользователя также легко, снова просто работая с тем же списком пользователей

Теперь проблема с этим подходом заключается в том, что когда список пользователей становится огромным (скажем, миллионы), для загрузки может потребоваться некоторое время. А также, когда я перехожу непосредственно к /detail/<id>, я пока не буду загружать всех моих пользователей, поэтому, чтобы получить данные только для того, что мне нужно, я должен сначала загрузить все это. Миллионы пользователей просто для редактирования.

Разделенный набор данных

Я перехожу к /list, и вместо того, чтобы загружать всех моих пользователей из api, я загружаю только пару из них, в зависимости от того, на что будут установлены мои users_per_page и users_current_page, и я, вероятно, сохраните данные как users_currently_visible
Затем я перехожу к /detail/<id>, сохраняю currently_selected_user с <id> как val... и вместо поиска через users_currently_visible я просто загружаю пользовательские данные из api..
при обновлении я не буду обновлять users_currently_visible каким-либо образом
и я не добавлю

То, что я вижу в качестве возможной проблемы, заключается в том, что мне придется после посещения /list загружать данные из api снова, потому что это может быть не синхронизировано с тем, что в базе данных, я также могу быть ненужной загрузкой данных пользователей, поскольку они могут быть случайно уже внутри моего users_currently_visible

какие-то франкенштейновские синаниганы

Я подробно, я делаю то же самое, что и в разделенном наборе данных, но вместо прямой загрузки пользовательских данных из api, я сначала проверяю:
- У меня есть users_currently_visible
- если да, есть ли пользователь с моим идентификатором между ними? если оба они истинны, я тогда использую его как мои пользовательские данные, в противном случае я делаю вызов api
то же самое происходит при обновлении, я проверяю, существует ли мой пользователь между users_currently_visible, если это так, я также обновляю этот список, если не делаю ничего

Это, вероятно, сработает, но на самом деле это не так. Мне также, вероятно, еще нужно будет загрузить свежий список users_currently_visible при посещении /list, потому что я, возможно, добавил новый.

Есть ли какой-нибудь любимый способ любить?... Я уверен, что каждый пользователь одного редуктора должен был встретить одни и те же вещи.

Спасибо!

Ответ 1

Проконсультируйтесь с "реальным миром" из Редукс репо.
Он показывает решение именно этой проблемы.

Форма состояния должна выглядеть так:

{
  entities: {
    users: {
      1: { id: 1, name: 'Dan' },
      42: { id: 42, name: 'Mary' }
    }
  },
  visibleUsers: {
    ids: [1, 42],
    isFetching: false,
    offset: 0
  }
}

Примечание. Я сохраняю entities (ID → Карты объектов) и visibleUsers (описание видимых в настоящее время пользователей с состоянием разбивки на страницы и идентификаторами) отдельно.

Это похоже на ваш подход "Общий набор данных". Однако я не думаю, что недостатки, которые вы перечисляете, являются настоящими проблемами, присущими этому подходу. Давайте взглянем на них.

Теперь проблема с этим подходом заключается в том, что когда список пользователей становится огромным (скажем, миллионы), может потребоваться некоторое время для загрузки

Вам не нужно загружать их все! Объединение всех загруженных объектов в entities не означает, что вы должны запросить их все. entities должен содержать все объекты, которые были загружены пока - не все объекты в мире. Вместо этого вы загружаете только тех, которые вы показываете в настоящее время в соответствии с информацией разбивки на страницы.

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

Нет, вы запрашиваете только один из них. Действие ответа будет срабатывать, а редуктор, ответственный за entities, объединит этот единственный объект в существующее состояние. Просто потому, что state.entities.users может содержать более одного пользователя, не означает, что вам нужно загрузить все из них. Подумайте о entities как к кешу, который не нужно заполнять.

Наконец, я снова перенаправляю вас на "реальный мир" из репозитория Redux. Он точно показывает, как писать редуктор для информации о папках и сущности объекта, а как нормализовать JSON в ответах API с помощью normalizr, чтобы его Легко для редукторов для равномерного извлечения информации из действий сервера.