CODEWITHSUNDEEP
reactjsredux
prajeesh
prajeesh

Reputation: 2382

Redux state doesn't persist on refresh

I have a header component where the user details are fetched and then stored in redux.

Now, in the user profile edit page, I am connecting the same reducer to fetch user details.

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

this.props.user contains the user object.

The problem is that, when the page is refreshed, redux state doesn't persist and there is no user object in props.

What is the correct way to solve this issue?

Upvotes: 1

Views: 4037

Answers (1)

pritesh
pritesh

Reputation: 2192

One way you can do is by using redux-persist.Update your store to use persisted reducer like so :

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

It uses localStorage to store the data. So next time when you refresh the page it will rehydrate the store from localStorage.

Upvotes: 3

Related Questions