How to store data in Redux when page load?

Question

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.

Answer 1

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!

Answer 2

redux 存储是内存存储，因此一旦您重新加载页面，数据就会消失，因此为了避免这种情况，您可以使用诸如redux-persist类的东西，或者只是在根组件的 unmout 上将您的空洞状态保存在像localstorage这样的内存中，然后将其打开组件安装

Answer 3

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 eg 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.

Answer 4

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.