How to resolve Refresh in React App

More and More people are facing the problem when user clicks refresh button in react web site. such as 404 not found or react crash.

To solve the refresh reactjs issue, there is react library: redux-persist you can use.

Basic Usage:

In your store.js file, add the below code on the top:

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

const yourReducer = combineReducers({
});

// your initial states here
const initialStates = {
};

const persistConfig = {
  key: 'root',
  storage,
  stateReconciler: autoMergeLevel2
}


const persistedReducer = persistReducer(persistConfig, yourReducer );
export const store = createStore(persistedReducer, initialStates)
export const persistor = persistStore(store)

In your major app.js file, add the below code

import {PersistGate} from 'redux-persist/lib/integration/react';
import {persistor, store} from './store/store';
......

<Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>

Then you are done, ready to refresh page……