Как организовать хранение «избранного» пользователя?

Как организовать отображение статуса "в избранном" для товара на фронтенде при наличии объекта пользователя, который содержит информацию об избранных товарах? Какую стратегию можно использовать для проверки статуса избранного товара на фронтенде при наличии объекта пользователя без необходимости хранения списка избранных товаров в сессии или делать запрос в базу данных?
  • 9 февраля 2024 г. 7:30
Ответы на вопрос 2
Хранение "избранного" пользователя можно организовать на бэкенде, используя базу данных. Для этого создаётся таблица, связывающая пользователей с товарами. Каждая запись в этой таблице указывает, что пользователь добавил товар в избранное.

При наличии объекта пользователя, который содержит информацию об избранных товарах, для отображения статуса "в избранном" на фронтенде нужно следовать следующим шагам:

1. При аутентификации пользователя подгружать список идентификаторов избранных товаров и сохранять его во фронтенд-части приложения, например, в состоянии Redux, MobX или в контексте, если используется React.

2. При отображении списка товаров на фронтенде необходимо сравнивать идентификаторы товаров с списком идентификаторов из избранного. Если товар присутствует в списке избранного пользователя, отображать соответствующий статус (например, графический значок сердечка).

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

Если необходимо избежать хранения списка избранных товаров на клиенте в сессии и не делать запрос в базу данных при каждом отображении товара, можно использовать следующий подход:

- **Сетевое хранилище (Web Storage API):** Использовать `localStorage` или `sessionStorage` для хранения списка избранных товаров. Обновлять данные хранения при любых изменениях в избранном.
- **Куки:** Сохранить информацию об избранных товарах в куках. Это позволит передавать информацию при каждом запросе к серверу, но имеет ограничения по размеру данных.
- **Клиентский стейт:** В случае одностраничного приложения (SPA) воспользоваться клиентским хранилищем состояний, чтобы синхронизировать эту информацию между различными компонентами.

Важно помнить, что для важных действий, связанных с изменением состояния на сервере (например, добавление в избранное), следует придерживаться более надежного подхода с выполнением операций на бэкенде и подтверждением изменений с помощью запроса на сервер. Это можно сделать асинхронно, чтобы не загружать список избранных при каждом запросе на просмотр товаров.
Я для решения аналогичной задачи сделал api-роут, в котором проверяется авторизация - если пользователь авторизован, то запрос проксируется на бэкенд, если не авторизован, то идёт работа с локальной сессией. 
Ну а на клиенте просто в компоненте кнопки добавления в избранное через RTK-Query запрашивается id всех товаров из избранного через этот роут.
Похожие вопросы