Redux persist rehydrate previous auth state too late
The persistStore
function which is used to make your store persistent have a third param callback
which is invoked after store rehydration is done. You have to start your app with some sort of preloader, which waits for rehydration to happen and renders your full application only after it finishes.
redux-persist
docs even have a recipe for this scenario. In your case all the react-router
stuff should be rendered inside initial loader as well:
export default class Preloader extends Component {
constructor() {
super()
this.state = { rehydrated: false }
}
componentWillMount(){
persistStore(this.props.store, {}, () => {
this.setState({ rehydrated: true });
})
}
render() {
if(!this.state.rehydrated){
return <Loader />;
}
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>
);
}
}
const store = ...; // creating the store but not calling persistStore yet
ReactDOM.render(<Preloader store={store} />, ... );