Используйте localStorage для сохранения вашего состояния
Что такое Redux?
Redux — это контейнер с предсказуемым состоянием для приложений JavaScript. Это помогает вам писать приложения, которые ведут себя последовательно, работают в разных средах (клиент, сервер и родной) и легко тестируются. — https://redux.js.org/
Проще говоря, Redux — это библиотека JavaScript с открытым исходным кодом, используемая для упрощения управления состоянием. Он широко используется с React, но может использоваться с любым JavaScript Framework. Все состояние вашего приложения хранится в одном Store. Доступ к этому хранилищу может получить любой компонент вашего приложения, что упрощает управление состоянием.
Вы задаетесь вопросом, настолько ли хорош Redux, в чем проблема? Проблема здесь в том, что хранилище, используемое для состояния вашего приложения, не сохраняется при обновлении. Представьте, если у вас есть экран входа в систему. Если вы обновите свою страницу после входа в систему, вы снова будете перенаправлены на страницу входа. Это потому, что ваше состояние приложения потеряно. Ваше приложение больше не запоминает ваш последний вход в систему и сразу же выходит из системы.
Как решить эту проблему?
Дэн Абрамов предоставил отличный видеоурок Redux: сохранение состояния в локальное хранилище. В этом руководстве мы будем использовать store.subscribe() для сохранения состояния приложения в localStorage. Я предполагаю, что вы уже знакомы с Redux и уже создали проект для реализации следующих шагов.
1. Напишите функцию для сохранения состояния Redux в localStorage
Создайте новый файл localStorage.js в той же папке, что и ваш index.js. Добавьте в этот файл следующую функцию.
Здесь мы создали функцию saveState. Эта функция принимает состояние в качестве параметра. Затем он преобразует этот объект JSON в строку. Затем эта строка сохраняется в localStorage для ключа «state».
2. Подписаться на изменение состояния для обновления localStorage
Чтобы использовать функцию, которую мы создали на первом шаге, добавьте следующую строку в ваш index.js:
Сначала мы импортировали saveState. Затем подпишитесь на магазин, чтобы saveState вызывался каждый раз при обновлении вашего состояния. Обратите внимание, что здесь мы ограничиваем вызовы функций. Это связано с тем, что если ваше состояние обновляется много раз в течение секунды, localStorage будет обновляться слишком часто. Чтобы этого не произошло, установите lodash. Здесь мы сократили вызовы функций до 1 секунды, чтобы saveState вызывался только один раз в секунду.
Примечание. Если вы используете «createStore» вместо «configureStore», не паникуйте. Просто оставьте сейчас значение «createStore».
3. Проверьте свое состояние в инструментах разработчика Chrome.
Нажмите F12, чтобы открыть инструменты разработчика. Перейдите в Приложение -> Локальное хранилище. Вы можете увидеть свое состояние здесь.
4. Загружать состояние из localStorage при обновлении страницы
Теперь давайте загрузим это сохраненное состояние при загрузке страницы. Добавьте новую функцию в файл localStorage.js.
Мы добавили loadState для получения состояния, сохраненного на предыдущем шаге. В этой функции мы прочитали последнее сохраненное состояние из localStorage. Затем это состояние преобразуется в объект с помощью JSON.parse().
В index.js импортируйте loadState и передайте возвращаемое значение в configureStore. Ваш index.js должен выглядеть примерно так, как показано ниже.
ПРИМЕЧАНИЕ. Если в index.js есть createStore, а не configureStore. Обратитесь к разделу Настройка магазина и ознакомьтесь с преимуществами configureStore по сравнению с createStore. Если вы по-прежнему решите использовать createStore вы заменяете строку 4 следующим кодом:
const store = createStore(reducer, loadState());
Попробуйте обновить приложение сейчас. Вуаля! Состояние сохраняется и сейчас.
Бонус:
Если вы не хотите сохранять все состояние, вы можете манипулировать объектом, отправленным в saveState. Например, я хочу сохранить только флаг, чтобы проверить, вошел ли пользователь в систему. Я могу заменить свой код следующим фрагментом:
Надеюсь, что этот урок помог вам решить вашу проблему. Не стесняйтесь задавать вопросы, если они есть!
