Правильная архитектура сохраняемого хранилища Redux и его сброс - PullRequest
Новая
       32

Правильная архитектура сохраняемого хранилища Redux и его сброс

0 голосов
/ 03 июля 2019

Я работаю над интернет-магазином. У меня есть редуктор заказов, где я могу держать свой заказ. После обновления страницы мой магазин становится пустым (что очевидно). Основная идея заключается в том, чтобы сохранить мой заказ в течение некоторого периода времени (например, 20 минут). Также я хочу сохранить только часть моего магазина (состояние заказа). Итак, я решил сохранить свое состояние в местном хранилище

Но вот фокус. Как сделать это правильно со стороны архитектуры и шаблонов? У меня есть несколько идей:

  1. Подпишитесь на мой магазин, используя store.subscribe(), и перепишите мое местное хранилище при каждом изменении магазина. Это будет немного странно, потому что мне нужно разобрать мой магазин с помощью, взять его и отправить в локальное хранилище. Кроме того, мой обратный вызов будет вызываться при каждом изменении, это может повлиять на производительность.

  2. Сделайте это прямо в диспетчере (я полагаю, это анти-шаблон):

    const addToOrder = orderItem => ({ type: actionTypes.ADD_TO_ORDER, payload: orderItem }); export const addItemToOrder = orderItem => dispatch => { // localstorage.setItem() ... dispatch(addToOrder(orderItem)); }

  3. Использовать такие библиотеки, как
    https://www.npmjs.com/package/redux-persist
    https://www.npmjs.com/package/redux-localstorage
    https://www.npmjs.com/package/redux-localstorage-simple
    Но как в этом случае очистить свое локальное хранилище через 20 минут после закрытия вкладки?

Итак, как правильно сохранить мое состояние и как очистить локальные хранилища?
Заранее благодарю за помощь!

1 Ответ

0 голосов
/ 03 июля 2019

Все пути возможны.Во-вторых, также, как вы используете создатель действий, чтобы сделать дополнительную работу.Например, создатели действий используются для извлечения данных, поэтому сохранение данных в localStore не является проблемой.

Я предлагаю использовать вариант 3. Он обеспечивает наилучшее разделение проблем.Код для хранения данных находится в одном месте и распространяется на несколько создателей действий.

К сожалению, вы не сможете установить время истечения для элементов localStore.Но так как localStore доступен только для вашего приложения, вы можете оставить элементы навсегда, но добавив дату и время хранения.А во время запуска приложения в следующий раз просто проверьте время и, если данные старше 20 минут, удалите их.Вы можете сделать эту проверку в функции config.merge.

...