1

I am quite new to React and Redux framework however I am able to store and grab the data from redux whereas I am not able to grab the data when refreshing the page manually. At that time the React and Redux state were blank.

I am really confused if the state were blank then why we will use redux instead of localStorage / sessionStorage.

If I am doing something wrong then please help me.

Help much appreciated.

Rituraj
  • 43
  • 1
  • 6
  • 1
    when you reload the page, your app's state is lost. Redux isn't a persistent storage like localStorage. Its just for better state management of your app. – Yousaf Dec 07 '19 at 08:57

4 Answers4

0

You can use a library like redux-persist to setup persistence on the browser.

https://github.com/rt2zz/redux-persist

EDIT:

Redux stores the data in-memory. To persist data from redux to localStorage and then hydrate the app on refresh you need additional handling. redux-persist makes that easier.

The primary reason to redux is to decouple the state of the application from the presentation layer (components). Redux deals with state, localStorage deals with persistence which two different concepts. Here is more on the subject of why redux.

Hope that helps!

tony
  • 1,274
  • 1
  • 11
  • 27
  • Thanks for your help. I checked your reference link "redux-persist" but as my understanding, it is working as a localStorage. If yes then why we will use all the plugin like redux, redux-persist to storing data instead of using localStorage directly. Correct me if I am wrong! – Rituraj Dec 09 '19 at 07:09
0

redux store is an in memory store so once you reload page the data will disappear so to avoid this you can use something like redux-persist or simply on the unmout of the root component save your hole state in a memory like localstorage and get it on component mounted

walid sahli
  • 406
  • 3
  • 11
0

Redux is used for two points

  • For large applications
  • For better user experience (you call the api once and later on gets the data from Redux instead of calling the API again)

Redux is preferred to use for big mid-large applications. You can use Redux with small applications too but its not required. The main point of using is Redux to manage the data properly in memory. When your application grows then you need to proper store the data in memory. If there is a change in data e.g. Username, and it is being showed at different places in the page then in that case every place is taking the fresh copy of data from Redux. You will have better idea of Redux when you create a large application unlike small application. Also consider a case when you go to "users" page you load all the users list, then you go back to "home" page and then again you go to "users" page. Now if you are using Redux you will simply show the data from Store, otherwise you have to load the data again.

Emmad Zahid
  • 438
  • 6
  • 15
0

As @tony said, you could use redux-persist to store data. You could also configure redux-persist to store data in localStorage or sessionStorage. This is how the configuration would look like 

import reducers from './reducer';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const persistConfig = {
key: 'root',
storage: storage,
stateReconciler: autoMergeLevel2
};
const pReducer = persistReducer(persistConfig, reducers);

And we are using redux-persist over localStorage/sessionStorage directly is because a change in a variable stored in localStorage/sessionStorage won't make your component know it dynamically, whereas if you store data using redux-persist any change in that variable(state) will be shown in the component where you are using its value.

AD95
  • 180
  • 2
  • 7