Access isAuthenticated prop using Redux - reactjs

Question

I think this is a relatively easy problem, however, I'm getting a little confused using Redux. Basically I'm trying to create a PrivateRoute Component and I can't figure out how to access the isAuthenticated prop. Help is appreciated.
UPDATE
Path: App.js
class App extends Component {
componentDidMount() {
store.dispatch(loadUser());
}
render() {
return (
<Provider store={store}>
<Router>
<Header />
<Switch>
<Route exact path="/login">
<ErrorBoundary>
<LoginPage />
</ErrorBoundary>
</Route>
<PrivateRoute path="/purchase_order">
<p>Test</p>
</PrivateRoute>
</Switch>
</Router>
</Provider>
);
}
}
Path: PrivateRoute
const PrivateRoute = ({ children, ...rest }) => (
<Route
{...rest}
render={({ location }) =>
this.props.isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: {
from: location
}
}}
/>
)
}
/>
);
const mapStateToProps = (state) => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);

Answer 1

You have done great, you also have structured the functional component very well for PrivateRoute, but there is a mistake while accessing the props, and using as this.props.isAuthenticated, first thing this.props is used only and only in class-based React component or you can use it as (props.isAuthenticated assumed that you have passed isAutheticated prop in PrivateRoute React functional component).
Points you have done-
You have connected your global state to this PrivateRoute functional component.
You have structurally defined your PrivateRoute functional component.
Redux state -
state: {
auth: {userId: 'ob2-51-hw-s124' // any random string based on your API},
otherReducer: {...}
}
Points to be done-
import connect from the react-redux module.
import Route, Redirect from the react-router-dom module.
Final Code
AppRouter.js
// module import
import LandingPage from '...';
import NotFoundPage from '...';
import DashBoardPage from '...';
import LoginPage from '...';
// React functional component that can be imported in App.js
const AppRouter = () => (
<Router history={history}>
<div>
<Switch>
<PublicRoute path="/" exact={true}>
<LandingPage />
</PublicRoute>
<PrivateRoute path="/dashboard">
<DashboardPage />
</PrivateRoute>
<PrivateRoute path="/login">
<LoginPage />
</PrivateRoute>
<PublicRoute path="/help" >
<HelpPage />
</PublicRoute>
<Route>
<NotFoundPage />
</Route>
</Switch>
</div>
</Router>
);
export default AppRouter;
PrivateRoute.js
// module import
import React form 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
// React functional PrivateRoute component
export const PrivateRoute = ({
auth,
children,
...rest
}) => {
const isAuthenticated = !!auth.userId; // converting auth.userId(typeof string) to false/true(typeof boolean)
return (
<Route {...rest} component={(props) => (
isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: {
from: props.location
}
}}
/>
)
)}
/>
);
}
// redux connect
const mapStateToProps = (state) => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);

Answer 2

Your mapStateToProps function shows that you put the state.auth value into the auth prop
You are using a function component, so there is no this.
So, assuming that isAuthenticated is a property of auth, then:
rest.auth.isAuthenticated otherwise: rest.auth
You can also destructure the auth from the props and get direct access to it. Since you don't need to pass it into the route.
const PrivateRoute = ({ children, auth, ...rest }) => (
<Route
{...rest}
render={({ location }) =>
auth.isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: {
from: location
}
}}
/>
)
}
/>
);
const mapStateToProps = (state) => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);