react-router-dom PrivateRoute with redux endless loading

Question

After reloading the PrivateRoute redirects to /login before the start of authorization, because initial redux state is false for both of them.

Those are logs from router:

PrivateRoute.js:16 Loading: false isAuthenticated: false
PrivateRoute.js:16 Loading: true isAuthenticated: false
PrivateRoute.js:16 Loading: false isAuthenticated: true

It is working correctly, I just need a way to distinguish initial state from not authenticated user.

My attempt

My first thought was changing initial state for isLoading to true:
Weird behavior. Page doesn't load at all. Even whole App component can't mount so I don't really know what is going on.
Changing initial state for isAuthenticated to null and changing conditions from

isLoading ?

to

isAuthenticated === null ?

(Router below)

Everything seems fine until PrivateRoute is required. When debugger is at the if statement everything freezes again.

This is my PrivateRoute component as I found Here

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import Spinner from "../../components/Spinner";

const PrivateRoute = ({
  component: Component,
  isLoading,
  isAuthenticated,
  ...rest
}) => (
  <Route
    {...rest}
    render={props =>
      isLoading ? (
        <Spinner />
      ) : isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{ pathname: "/login", state: { from: props.location } }}
        />
      )
    }
  />
);

const mapStateToProps = state => ({
  isLoading: state.auth.isLoading,
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(PrivateRoute);

It won't work, because using a render prop like this will not trigger an update when the new state comes in via props, because react cannot detect the change in Route's render prop since it still points to the same function. So according to react's diffing nothing has changed. — deowk
"It is working correctly, I just need a way to distinguish initial state from not authenticated user." Are you setting isAuthenticated in redux? Why are you trying to distinguish between initial state & not authenticated user? — displacedtexan
Sounds like attempt #1 is what you should be shooting for. There's nothing wrong with the code, just your implementation. Figure out why #1 didn't work, that sounds like what you really want to do.The real problem is that if isAuthenticated and isLoading can be false at the same time - you have no choice but to redirect, so there's nothing logically wrong with that. (Also, might I suggest isAuthenticating rather than isLoading to make it crystal clear what is happening). — Adam
@deowk I added the whole code in the edit. The component is connected to the store and state updates are triggered — jjablonski
@displacedtexan Yes, im setting isAuthenticated via redux. The need for distinguishing is, so that the initial state is identical to user not authorizated and the PrivateRoute is redirecting to /login before the user even starts loading — jjablonski

jjablonski jjablonski · Accepted Answer · 2020-02-21T21:47:30

I spent around 5 hours to realise I forgot import something in the Spinner ... Thank you all for effort

react-router-dom PrivateRoute with redux endless loading

My attempt

1 Answers