CODEWITHSUNDEEP
reactjscookiesreduxlocal-storage
Sajad Beheshti
Sajad Beheshti

Reputation: 689

Using Redux instead of cookie and local storage

Will Redux store be cleaned after reloading the browser? And can i use redux instead of cookie to save user info and token?

Upvotes: 0

Views: 1884

Answers (3)

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8102

Redux store gets initial state upon app reload. Try this: Make a dump component for local storage and use it anywhere you want.

Constants.js

export const USER_MODEL = {
set: ({ token, userInfo }) => {
localStorage.setItem('token', token);
localStorage.setItem('userInfo', userInfo);
},
remove: () => {
localStorage.removeItem('token');
localStorage.removeItem('userInfo');
},
get: () => ({
token: localStorage.getItem('token'),
userInfo: localStorage.getItem('userInfo’),
})
};

User.js

import { USER_MODEL } from './Constants';
// just an example how you can set                    localStorage anywhere in your component 

USER_MODEL.set({
    token: “abc”,
    userInfo: {name: ‘foo’, city: ‘bar’},
  });

// get user model from localStorage
const token = localStorage.get().token;
const userInfo =   localStorage.get().userInfo;

Upvotes: 0

CodeZombie
CodeZombie

Reputation: 2087

Redux is a state management library so,on refresh ,the redux store contains only the initialstate of the reducers.If you want to save tokens or authenticated user info then save it in localStorage.And also make sure,you un set the local storage after logging out of the app.

Upvotes: 1

Win
Win

Reputation: 5584

Use Redux Persist or build a middleware that will save the store everytime an action is dispatched and then create a HOC that when the app is reloaded (a.k.a the page is refreshed), it'll check the local storage for the item and then restore it to the store before the app is loaded and then render the application.

Depending on the complexity and if you want to blacklist certain reducers, I would use Redux-Persist. If you want to something simple and built by yourself use the middleware option.

Upvotes: 0

Related Questions