Load state/data before render?

Question

I have implemented the authentication part of my app (built using the MERN stack). The login action validates login data, then loads user data, then pushes the route to /dashboard. On the dashboard page, I have a simple Welcome to the dashboard, {email}! however I am getting an error telling me that it can not return data of null. I also have the users First & Last name as well as their email in the navbar, that also spawns an error of returning null data. I have a useEffect that loads the user data in my App.js but i'm still receiving the null errors.

Is there a way to load the data prior to render?

Index.js

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

App.js

const App = () => {
  const [loading, setLoading] = useState(true);
  const dispatch = useDispatch();

  useEffect(() => {
    // check for token in LS
    if (localStorage.token) {
      setAuthToken(localStorage.token);
    }
    dispatch(attemptGetUser())
      .then(() => setLoading(false))
      .catch(() => setLoading(false));

    // Logout user from all tabs if they logout in another tab
    window.addEventListener('storage', () => {
      if (!localStorage.token) dispatch({ type: LOGOUT });
    });

    // eslint-disable-next-line
  }, []);

  return loading ? (
    <Loading cover="page" />
  ) : (
    <div className="App">
      <Switch>
        <Route path="/" component={Views} />
      </Switch>
    </div>
  );
};

redux/thunks/Auth.js

export const attemptLogin = (formData) => async (dispatch) => {
  await postLogin(formData)
    .then((res) => {
      dispatch(login(res.data));
      dispatch(push('/dashboard'));
    })
    .then(() => {
      dispatch(attemptGetUser());
    })
    .catch((error) => {
      const errors = error.response.data.message;
      dispatch(setAlert('Uh-oh!', errors, 'error'));
    });
};

redux/thunks/User.js

export const attemptGetUser = () => async (dispatch) => {
  await getUser()
    .then((res) => {
      dispatch(setUser(res.data));
    })
    .catch((error) => {
      const errors = error.response.data.message;
      console.log(errors);
      dispatch(setAlert('Uh-oh!', errors, 'danger'));
    });
};

views/app-views/dashboard

const Dashboard = () => {
  const { email } = useSelector((state) => state.user.user);
  return (
    <div>
      Welcome to the dashboard,
      <strong>{email}</strong>!
    </div>
  );
};

export default Dashboard;

components/layout-components/NavProfile.js

export const NavProfile = () => {
  const { firstName, lastName, email } = useSelector(
    (state) => state.user.user
  );

  const dispatch = useDispatch();

  const onLogout = () => {
    dispatch(attemptLogout());
  };

  const profileImg = '/img/avatars/thumb-1.jpg';
  const profileMenu = (
    <div className="nav-profile nav-dropdown">
      <div className="nav-profile-header">
        <div className="d-flex">
          <Avatar size={45} src={profileImg} />
          <div className="pl-3">
            <h4 className="mb-0">{firstName} {lastName}</h4>
            <span className="text-muted">{email}</span>
          </div>
        </div>
      </div>
      <div className="nav-profile-body">
        <Menu>
          {menuItem.map((el, i) => {
            return (
              <Menu.Item key={i}>
                <a href={el.path}>
                  <Icon className="mr-3" type={el.icon} />
                  <span className="font-weight-normal">{el.title}</span>
                </a>
              </Menu.Item>
            );
          })}
          <Menu.Item key={menuItem.legth + 1} onClick={onLogout}>
            <span>
              <LogoutOutlined className="mr-3" />
              <span className="font-weight-normal">Logout</span>
            </span>
          </Menu.Item>
        </Menu>
      </div>
    </div>
  );
  return (
    <Dropdown placement="bottomRight" overlay={profileMenu} trigger={['click']}>
      <Menu className="d-flex align-item-center" mode="horizontal">
        <Menu.Item>
          <Avatar src={profileImg} />
        </Menu.Item>
      </Menu>
    </Dropdown>
  );
};

export default NavProfile;

Answer 1

So the error is telling you that in your redux state that state.user.user is undefined, this is why you can't destructure firstName, lastName, email values.

If in your store state.user.user is at least a defined, empty object ({}) then the access of null errors should resolve.

const userReducer = (state = { user: {} }, action) => {
  ...
}

This can still potentially leave your UI rendering "undefined", so in the component code you'll want to provide default values, i.e.

const { firstName = '', lastName = '', email = '' } = useSelector(
  (state) => state.user.user
);

The alternative is to have fully qualified initial state in your user reducer slice.

const initialState = {
  user: {
    firstName: '',
    lastName: '',
    email: '',
  },
};

const userReducer = (state = initialState, action) => {
  ...
}

Answer 2

Seems like you could fix this by changing your Redux store initial state.

Taking your Dashboard component as an example:

const Dashboard = () => {
  const { email } = useSelector((state) => state.user.user);
  return (
    <div>
      Welcome to the dashboard,
      <strong>{email}</strong>!
    </div>
  );
};

It expects that there is a user object with an email string in the user slice of state in your Redux store. As noted in their documentation

You could update your createStore call to include a initial value for the redux store like createStore({'user': {'user': {'email': ''}}}); for example