Состояние Redux не сохраняется при обновлении

Question

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

Теперь на странице редактирования профиля пользователя я подключаю тот же редуктор для извлечения сведений о пользователе.

export default connect(state => ({
  ...state.user,
}),{
  ...actions,
})(MyProfile);

this.props.user содержит объект пользователя.

Проблема заключается в том, что при обновлении страницы состояние избыточности не сохраняется и пользовательский объект в реквизите отсутствует.

Как правильно решить эту проблему?

Answer 1

Один из способов сделать это - использовать redux-persist . Обновите хранилище, чтобы использовать постоянный редуктор, например так:

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native

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 }
}

Для хранения данных используется localStorage.Так что в следующий раз, когда вы обновите страницу, она будет переформатировать хранилище из localStorage.