CODEWITHSUNDEEP
reactjsreduxreact-redux
DevGe
DevGe

Reputation: 1459

How to make my redux action will permanently save even I refresh my browser?

I'am currently new on react js and redux and I start studying first the Login Form. Right now I experience problem when I press the button sign in, the state save on redux action however when I refresh the browser the redux action removed meaning all the state remove automatically when the browser refresh. So my question here how to save the redux action permanent even If i refresh the browser it will not remove?

I read some thread here in stackoverflow, they suggest to use the redux-persist and this library is new for me. I don't really understand where should I put the persist library on my file.

I will share my sample work that I already made:

Store.js

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';


export default configureStore({
    reducer: {
        user: userReducer,
    }
});

UserSlice.js

import { createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({

    name:"user",

    initialState: {
        user: null,
    },
    
    reducers: {
       
       login: (state, action) => {
          state.user = action.payload
       },
       
       logout: (state) => {
         state.user = null
       },

    }
})

export const { login, logout } = userSlice.actions;

export const selectUser = (state) => state.user.user;

export default userSlice.reducer;

Root Index.js

import store  from './app/store';


ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
  document.getElementById('root')
);

Here is the sample output Redux Action after I press the submit button:

State

Output when I refresh the browser:

Null State

Error:

Error

Hope it helps.

Upvotes: 1

Views: 1087

Answers (3)

Amir Hossein
Amir Hossein

Reputation: 131

for authentication, we usually use local storage manually (without redux-persist) to save the token that we get from the API

Upvotes: 0

Shyam
Shyam

Reputation: 5497

In your store.js file

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';
import {persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const userDataPersistConfig = {
  key: 'user',
  storage: storage,
};



export default configureStore({
    reducer: {
        user: persistReducer(userDataPersistConfig, userReducer),
    }
}, 

 // need to switch of this serializable check as false . Else we will 
 // have the error "a non serializable value was detected in the state"
 // refer this - https://stackoverflow.com/questions/61704805/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using

 getDefaultMiddleware({
   serializableCheck: false
 })
);

In your root file where you have your top level component ( App.js ) . You need to do this

import {PersistGate} from 'redux-persist/integration/react'; 
import {persistStore} from 'redux-persist';
import store from './store';

const persistor = persistStore(store);

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

Note

The way in which you might have structured your code may be different for example you might not have separate file where you are configuring the store . But the above places are the one where you will involve redux-persist. This should give an fair idea .

Upvotes: 2

Brian
Brian

Reputation: 556

Possible persistence options are localStorage, file system or any database. redux-persist uses localStorage behind the scenes as far as I know.

Upvotes: 0

Related Questions