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

Question

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:

Output when I refresh the browser:

Error:

Hope it helps.

You can use `redux-persist` (start with the [official documentation](https://github.com/rt2zz/redux-persist)) or you can roll your own state persistence using localStorage. — Drew Reese, Jun 04 '21 at 07:13

Shyam · Accepted Answer · 2021-06-04T07:59:46.297

2

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 .

edited Jun 04 '21 at 07:59

answered Jun 04 '21 at 07:18

Shyam

5,292
1
10
20

thank you for your fair idea, Can i ask one more thing. based on my structure. how can i create an createStore file and connect it to my userSlice.js and store.js? – DevGe Jun 04 '21 at 07:24
In you code base where you have this `const store = createStore()` ? Can you add that file as well in your question ? – Shyam Jun 04 '21 at 07:26
sorry. I don't have any file that use that createStore, the only I have is store.js and userSlice.js. – DevGe Jun 04 '21 at 07:29
Edited my answer to align with your code structure . You only need to make the above changes . – Shyam Jun 04 '21 at 07:32
the persistStore is not defined. – DevGe Jun 04 '21 at 07:35
you need to import that from the redux-persist . `import {persistStore} from 'redux-persist';` – Shyam Jun 04 '21 at 07:36
the code you are given is working however I got new error. A non-serializable value was detected in an action, in the path: `register`. Value: and my page got white – DevGe Jun 04 '21 at 07:39
Shyam can refresh your page and I edit my post and please look at my last image that I upload. thats the error after I apply your code. – DevGe Jun 04 '21 at 07:42
that happens when I logged in and refresh the page it look like that. – DevGe Jun 04 '21 at 07:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/233309/discussion-between-shyam-and-devge). – Shyam Jun 04 '21 at 07:42

score 0 · Answer 2 · answered Jun 04 '21 at 07:13

0

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

answered Jun 04 '21 at 07:13

Brian

516
3
8

score 0 · Answer 3 · answered Jun 04 '21 at 08:44

0

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

answered Jun 04 '21 at 08:44

Amir Hossein

133
5

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

3 Answers3