Redux Store not populated before Component Render - reactjs

Question

I am working on the authentification procedure for an app I'm developing.
Currently, the user logins in through Steam. Once the login is validated the server redirects the user to the app index, /, and issues them a pair of JWTs as GET variables. The app then stores these in a Redux store before rewriting the URL to hide the JWT tokens for security purposes.
The app then decodes the tokens to obtain info about the user, such as their username and avatar address. This should be rendered in the app's SiteWrapper component, however, this is where my problem occurs.
What seems to be happening is SiteWrapper component loads before the App component finishes saving the tokens and thus throws errors as variables are not defined. Most of the fixes that seem relevant are for API requests, however, in this case, that is not the case. I already have the data in the URL. I'm not sure if the same applies.
Any suggestions on how to fix this? Any other best practice advice would be appreciated. I'm new to both React and Redux.
Error
Index
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import store from './redux/store';
// console debug setup
window.store = store;
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
serviceWorker.unregister();
App
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { connect } from 'react-redux';
import "tabler-react/dist/Tabler.css";
import history from './utils/history';
import {
storeRefreshJWTToken,
storeAccessJWTToken,
loadUserFromJWTRefreshToken
} from "./redux/app";
import {
HomePage
} from './pages';
class App extends Component {
componentDidMount() {
//Get tokens from URL when app loads and then hide them from url.
const urlParams = new URLSearchParams(window.location.search);
if(urlParams.has('access_token') && urlParams.has('refresh_token')){
this.props.storeRefreshJWTToken(urlParams.get('refresh_token'));
this.props.storeAccessJWTToken(urlParams.get('access_token'));
//Load user info from obtained tokens.
this.props.loadUserFromJWTRefreshToken();
}
history.push('/');
}
render() {
return (
<React.StrictMode>
<Router basename={process.env.PUBLIC_URL} history={history}>
<Switch>
<Route exact path="/" component={HomePage}/>
</Switch>
</Router>
</React.StrictMode>
);
}
}
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
storeRefreshJWTToken,
storeAccessJWTToken,
loadUserFromJWTRefreshToken
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
SiteWrapper
import * as React from "react";
import { withRouter } from "react-router-dom";
import { connect } from 'react-redux';
import {
Site,
Nav,
Grid,
List,
Button,
RouterContextProvider,
} from "tabler-react";
class SiteWrapper extends React.Component {
componentDidMount() {
console.log(this.props);
this.accountDropdownProps = {
avatarURL: this.props.user.avatar,
name: this.props.user.display_name,
description: "temp",
options: [
{icon: "user", value: "Profile"},
{icon: "settings", value: "Settings"},
{isDivider: true},
{icon: "log-out", value: "Sign out"},
],
};
}
render(){
return (
<Site.Wrapper
headerProps={{
href: "/",
alt: "Tabler React",
imageURL: "./demo/brand/tabler.svg",
navItems: (
<Nav.Item type="div" className="d-none d-md-flex">
<Button
href="https://github.com/tabler/tabler-react"
target="_blank"
outline
size="sm"
RootComponent="a"
color="primary"
>
Source code
</Button>
</Nav.Item>
),
accountDropdown: this.accountDropdownProps,
}}
navProps={{ itemsObjects: this.props.NavBarLinks }}
routerContextComponentType={withRouter(RouterContextProvider)}
footerProps={{
copyright: (
<React.Fragment>
Copyright © 2018
Thomas Smyth.
All rights reserved.
</React.Fragment>
),
nav: (
<React.Fragment>
<Grid.Col auto={true}>
<List className="list-inline list-inline-dots mb-0">
<List.Item className="list-inline-item">
Developers
</List.Item>
<List.Item className="list-inline-item">
FAQ
</List.Item>
</List>
</Grid.Col>
</React.Fragment>
),
}}
>
{this.props.children}
</Site.Wrapper>
);
}
}
const mapStateToProps = (state) => {
console.log(state);
return {
user: state.App.user
};
};
export default connect(mapStateToProps)(SiteWrapper);
Reducer
import initialState from './initialState';
import jwt_decode from 'jwt-decode';
//JWT Auth
const STORE_JWT_REFRESH_TOKEN = "STORE_JWT_REFRESH_TOKEN";
export const storeRefreshJWTToken = (token) => ({type: STORE_JWT_REFRESH_TOKEN, refresh_token: token});
const STORE_JWT_ACCESS_TOKEN = "STORE_JWT_ACCESS_TOKEN";
export const storeAccessJWTToken = (token) => ({type: STORE_JWT_ACCESS_TOKEN, access_token: token});
// User
const LOAD_USER_FROM_JWT_REFRESH_TOKEN = "DEC0DE_JWT_REFRESH_TOKEN";
export const loadUserFromJWTRefreshToken = () => ({type: LOAD_USER_FROM_JWT_REFRESH_TOKEN});
export default function reducer(state = initialState.app, action) {
switch (action.type) {
case STORE_JWT_REFRESH_TOKEN:
return {
...state,
jwtAuth: {
...state.jwtAuth,
refresh_token: action.refresh_token
}
};
case STORE_JWT_ACCESS_TOKEN:
return {
...state,
JWTAuth: {
...state.jwtAuth,
access_token: action.access_token
}
};
case LOAD_USER_FROM_JWT_REFRESH_TOKEN:
const user = jwt_decode(state.jwtAuth.refresh_token);
return {
...state,
user: user
};
default:
return state;
}
}
Store
import { createStore, combineReducers, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk'
import App from './app';
const combinedReducers = combineReducers({
App
});
const store = createStore(combinedReducers, applyMiddleware(ReduxThunk));
export default store;

Answer 1

componentDidMount() is going to run after first render. So on first render the this.props.user inside will be null at that point.
You could:
move the async call to componentWillMount() (not recommended)
put a guard in the SiteWrapper() so it can handle null case
not render Home from the App until the async call has finished

Answer 2

in componentDidMount() you are expecting user to be set.
You can:
Set user in initial state with some "isAuth" flag that you can easily check
As componentWillMount() is deprecated you can use componentDidUpdate() to check if user state is changed and do some actions.
Use asyns functions when sawing YWT

Answer 3

You could of course check for null and don't try to show the user's details in your SiteWrapper's componentDidMount()-method. But why? Do you have an alternative route to go if your user couldn't be found and is null? I guess no. So you basically have two options:
The ideal solution is to implement async actions and show an activity
indicator (e.g. spinner) until the jwt-token is loaded. Afterwards
you can extract your user information and fully render your
component as soon as the fetch is succesfully completed.
If you can't use async action, for whatever reason, I would suggest
the "avoid-null" approach. Put a default user in your initial
state and it should be done. If you update the user prop, the
component will rerender anyways (if connected properly).

Answer 4

I have solved my issue. It seems this was one of those rare cases where trying to keep things simple and develop was bad.
Now, when my application loads I either show the user information or a login button.
Once the key is loaded from the URL the component rerenders to show the user information.
This does increase the number of renders, however, it is probably the best way of doing it.