13,8 тыс подписчиков

5 Методов сохранения состояния в промежутках между перезагрузками страниц в React

3 мая 20213 мая 2021

390

3 мин

Источник: Nuances of Programming 1. LocalStorage — классовые компоненты Один из простых вариантов для сохранения состояния — использовать localStorage в браузере. Рассмотрим пример: В этом компоненте с состоянием имеется count. Теперь предположим, что нам надо при перезагрузке страницы сохранить значение этого счетчика count. Для этого просто задействуем localStorage: Теперь при задействовании localStorage в компоненте с состоянием значение этого состояния сохраняется, когда вызывается метод setState. Это простой подход для сохранения состояния в классовых компонентах. Посмотрим, как добиться того же в функциональном компоненте. 2. LocalStorage — функциональные компоненты Первым делом преобразуем компонент, основанный на классах, в функциональный компонент: A теперь посмотрим, как при добавлении localStorage в функциональный компонент с состоянием добиться сохранения этого состояния: В случае с функциональным компонентом применен несколько иной подход. Здесь использован хук use

Оглавление

1. LocalStorage — классовые компоненты
2. LocalStorage — функциональные компоненты
3. LocalStorage с Redux Store

Источник: Nuances of Programming

1. LocalStorage — классовые компоненты

Один из простых вариантов для сохранения состояния — использовать localStorage в браузере. Рассмотрим пример:

В этом компоненте с состоянием имеется count. Теперь предположим, что нам надо при перезагрузке страницы сохранить значение этого счетчика count. Для этого просто задействуем localStorage:

Теперь при задействовании localStorage в компоненте с состоянием значение этого состояния сохраняется, когда вызывается метод setState.

Это простой подход для сохранения состояния в классовых компонентах. Посмотрим, как добиться того же в функциональном компоненте.

2. LocalStorage — функциональные компоненты

Первым делом преобразуем компонент, основанный на классах, в функциональный компонент:

A теперь посмотрим, как при добавлении localStorage в функциональный компонент с состоянием добиться сохранения этого состояния:

В случае с функциональным компонентом применен несколько иной подход. Здесь использован хук useEffect, и сделано это для:

Отслеживания изменений и обновления LocalStorage.
Получения сохраненного значения из LocalStorage при инициализации.

3. LocalStorage с Redux Store

Но при сохранении состояния в localStorage на уровне компонента возникает одна проблема. И связана она с наличием нескольких экземпляров одного и того же компонента. Это приводит к неожиданному поведению, так как в localStorage создаются повторяющиеся ключи.

У этой проблемы два решения:

Передать идентификатор в повторно используемый компонент и задействовать его для хранения значения в localStorage.
Или сохранять состояние на более высоком уровне.

Для сохранения состояния приложения в localStorage будем использовать Redux.

Сначала посмотрим, как сделать это вручную, а затем попробуем задействовать библиотеку Redux Persist, которая поможет справиться с нашей задачей:

Здесь при использовании localStorage с Redux мы подписываемся на обновления хранилища и сохраняем это в localStorage. А при инициализации приложения передаем исходное состояние из localStorage.

4. Redux Persist

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

Обратите внимание: здесь пригодится популярная библиотекаRedux Persist.

import { createStore } from 'redux' import { persistStore, persistReducer } from 'redux-persist' import storage from 'redux-persist/lib/storage' // установлен по умолчанию в localStorage для веба
import rootReducer from './reducers'
const persistConfig = {
key: 'root',
storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default () => {
let store = createStore(persistedReducer)
let persistor = persistStore(store)
return { store, persistor }
}

А сохранять и инициализировать persistStore нам помогает persistReducer из Redux Persist.

5. Параметры URL

Наконец добрались до самого очевидного варианта — использования параметров URL для сохранения состояния. А этот подход годится, в случае если данные предельно простые и со значениями-примитивами. Это обусловлено ограничениями по длине URL.

Если приглядеться к этому коду, то мы заметим, что он добавляет состояние в историю браузера. Поэтому при инициализации компонента мы наследуем исходные значения параметров URL.

Одно из существенных преимуществ здесь — это возможность сохранения состояний для перезагрузки, а также перемещения между историческими состояниями с помощью кнопки браузера «Назад».

Заключение

Для сохранения состояния приложения на React используются localStorage и параметры URL.

В простой ситуации вполне сгодятся параметры URL. Если данные немного сложнее, стоит отдать предпочтение сохранению состояния в localStorage. В случае с localStorage решаем, где сохранять состояние: на уровне компонентов или на уровне приложений.

Чтобы упростить себе задачу и не заниматься сохранением и восстановлением состояния приложения вручную, задействуем библиотеки типа Redux Persist.

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

Спасибо за внимание.