How to save state when re-rendering a component with JWT Token - reactjs

Question

I"m having issues fully implementing authentication with a JWT token. I finally have my app keeping me signed in on a page refresh...HOWEVER, I loose the rest of the state of my user. So my user is still signed in, but has no username, or any kind of info.
Here is how I'm using the token to keep a user logged in.
const token = localStorage.getItem('token');
if (token) {
store.dispatch({ type: 'AUTH_USER'})
}
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Then my currentUser reducer has this case...
case 'AUTH_USER':
return { ...state, loggedIn:true }
The problem is on a page re-render state gets set back to an empty object. I suppose I could send a request back to the API to fetch the user data again...BUT, there has to be a way to keep that user's data stored???

Answer 1

I am using redux-persist to make the state persistent. Recommended. I had, however, some difficulties making it work.
Here is my code if you want to use it.
I am using redux-persist version 4 (version 5 had some major changes, didn't migrate to it yet), so please use this version if you want to use my code.
I am also using Redux DevTools, react-router and redux-thunk, therefore the code includes them.
These are the relevant parts from my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { compose, createStore, applyMiddleware } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import ReduxThunk from 'redux-thunk';
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
}) : compose;
const enhancers = composeEnhancers(
applyMiddleware(ReduxThunk),
autoRehydrate()
);
const initialState = {};
const store = createStore(
reducers,
initialState,
compose(enhancers)
);
persistStore(store);
ReactDOM.render(
<Provider store={store}>
<div>
<BrowserRouter>
<Switch>
<Route exact path="/xxx" component={xxx} />
<Route path="/yyy" component={yyy} />
</Switch>
</BrowserRouter>
</div>
</Provider>
, document.querySelector('#root'));
Good luck!