LocalStorage with react-redux

Question

Я использую реакцию и редукцию для своего SPA, и я хочу хранить некоторые данные локально. И мне нужно синхронизировать appState с localstorage, поэтому мои данные не будут потеряны после обновления страницы. Помоги мне, пожалуйста. Я совершенно новый для реагирования и сокращения и не очень понимаю, что происходит, но поскольку я думаю, что redux создает для меня это состояние всего приложения, поэтому я не могу просто привязать свое состояние к localstorage в компоненте приложения, будет просто состоянием компонента, а не моим приложением. (Некоторые хорошие учебные пособия, которые могут помочь мне понять жизненный цикл приложения, тоже будут оценены.)

Answer 1

Я бы предложил хранить данные в локальном хранилище с помощью следующих команд.

Набор данных в LocalStorage можно сделать с помощью команды:

localStorage.setItem('nameForData', variableNameForData);

Для извлечения данных, когда это требуется.

var variableNameForData = localStorage.getItem('nameForData')

Чтобы удалить данные из LocalStorage:

localStorage.removeItem('nameForData')

Они, как правило, можно положить внутрь создателей действий с отправкой, чтобы изменить состояние некоторых булевы, который отслеживает взаимодействие приложений с LocalStorage ,

Например, у вас может быть состояние, для которого установлено локальное хранилище.

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

Вы можете поместить эту функцию в componentWillMount(){}, и она будет вызываться, когда компонент сначала отображается, и, следовательно, в случае обновления.

Docs for component life cycle and specifically componentWillMount here

Docs for local storage here

Answer 2

Я могу предложить вам сохранить состояние после каждого действия. Для этого вы можете использовать локальное хранилище localStorage, которое хранит только весь объект состояния.

Затем в вашей части createStore вы получите initialState из localStorage API.

В этом случае вам не нужно изменять какие-либо компонент, Juste в InitialState от LocalStorage и промежуточного ПО, что сохранить состояние