4

I am implementing login with two different type of users using react redux. This is my login method:

export const login = (credentials) => (dispatch) =>
    api.user.login(credentials).then(user => {
      localStorage.userJWT = user.token;
      localStorage.userEmail = user.email;
      localStorage.userId = user.id;
      localStorage.surname = user.surname;
      localStorage.type = user.type;
      dispatch(userLoggedIn(user));
});
  1. For the first type of user, I return from backend: token, email, id, surname.
  2. For the second type of user, I return from backend: token, email, id, type.

I do some secured routes which the second type of user cannot access. So if the variable surname is returned, I define the specific route for that user.

If type variable is returned, it shows properly everything in links and in redux store as well. However, if I reload the page, then it automatically changes variable type into undefined surname.

This is where I am trying to save the redux state in store even if I reload the page. const store = createStore( rootReducer, composeWithDevTools(applyMiddleware(thunk)) );

 if(localStorage.userJWT && localStorage.userEmail && localStorage.userId && localStorage.type){
   const user = { token: localStorage.userJWT, email: localStorage.userEmail, id: localStorage.userId, type: localStorage.type};
   store.dispatch(userLoggedIn(user));
 }
 if(localStorage.userJWT && localStorage.userEmail && localStorage.userId && localStorage.surname){
   const user = { token: localStorage.userJWT, email: localStorage.userEmail, id: localStorage.userId, surname: localStorage.surname};
   store.dispatch(userLoggedIn(user));
 }

Can you please suggest why it is not following my if statement. Thank you in advance.

Julia
  • 111
  • 1
  • 2
  • 11
  • Possible duplicate of [How can I persist redux state tree on refresh?](https://stackoverflow.com/questions/37195590/how-can-i-persist-redux-state-tree-on-refresh) – Michael Freidgeim Aug 27 '19 at 13:54

1 Answers1

14

The Redux store/state is re-initialized on reload. You can keep your auth info in local storage, then pull that out to use as your initial state. That way, your Redux state will always have that auth information, even on reload.

function reducer (state = initState(), action) {
    return state
}

function initState () {
    return { 
        token: localStorage.userJWT, 
        email: localStorage.userEmail, 
        id: localStorage.userId, 
        surname: localStorage.surname
    }
}

Or, if you want to keep your entire Redux state on reload, you can try to implement some package that does that, like redux-persist.

Nick Swope
  • 331
  • 2
  • 7
  • I have reducers to save state. The problem is that it saves only state with `token, email, id, surname`, but overwrites `token, email, id, type` to `token, email, id, surname` during reload. – Julia Jan 23 '18 at 21:41
  • I guess I don't understand the question. You're saying you are pulling this stuff out of local storage and dispatching the userLoggedIn action when you reload, but the keys aren't right? It sounds like something is wrong with your actual reducer function or userLoggedIn action creator. Can you post those? – Nick Swope Jan 24 '18 at 13:46
  • 1
    I also just noticed you have two if-blocks in your example, without an else. Maybe your problem is that the first one (with type) gets dispatched, then the second one (with surname) gets dispatched. Depending on how you've set up your reducer, you might just be overwriting everything from the first dispatch. – Nick Swope Jan 24 '18 at 13:50
  • you know what, it was overridden so when I added `else` into `if statement`, it starts working. thank you – Julia Jan 24 '18 at 18:12