Redux React Router: Cannot Access Protected/Private Route

Question

I have a protected route that can only be accessed if the user has logged in and then isAuthenticated set to true. The issue I am having is, even after successfully logging in and being authenticated, I am getting redirected to login page. In my redux reducer file below, the isAuthenticated state is set to null by default. The weird part is that if I set isAuthenticated default value to true and then login successfully, I can access the protected route. However, when isAuthenticated is set to null, I am unable to access the protected route even if I successfully login. Would greatly appreciate it if someone can help. Thank you.

//Redux Reducer File

import{
  LOGIN_FAIL,
  LOGIN_SUCCESS,
  USER_LOADING,
  USER_LOADED,
  AUTH_ERROR
} from '../actions/types';

const initialState = {
  token: localStorage.getItem('token'),
  isAuthenticated: null,
  isLoading: false,
  user: null
};

export default function(state = initialState, action){
  switch(action.type){
    case USER_LOADING:
      return{
        ...state,
        isLoading: true
      };
    case USER_LOADED:
      return{
        ...state,
        isAuthenticated: true,
        isLoading: false,
        user: action.payload
      };
    case LOGIN_SUCCESS:
    localStorage.setItem('token', action.payload.token);
    return{
      ...state,
      ...action.payload,
      isAuthenticated: true,
      isLoading: false
    };
    case LOGIN_FAIL:
    case AUTH_ERROR:
    localStorage.removeItem('token');
      return{
        ...state,
        token: null,
        isAuthenticated: false,
        isLoading: false,
        user: null
      };

    default:
      return state;
  }

}

//ProtectedRoute file

export const ProtectedRoute = ({
  isAuthenticated,
  component: Component,
  ...rest
})=>(
  <Route {...rest} component={(props) =>(
    isAuthenticated ? (
      <Component {...props}/>
    ):(
      <Redirect to="/login"/>
    )
  )}/>

)

ProtectedRoute.propTypes = {
  isAuthenticated: PropTypes.bool
}
const mapStateToProps = state =>({
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(ProtectedRoute)

//App.js File

class App extends Component{
  componentDidMount(){
    store.dispatch(loadUser());
  }
  render(){
  return(
  <Provider store={store}>
  <div className="App">
    <Router>
      <Switch>
        <Route exact path="/login" component={LoginPage}/>
        <ProtectedRoute exact path="/userfeed" component={UserFeed}/>
      </Switch>
    </Router>
  </div>
  </Provider>

);
}
};

export default App;

Answer 1

Change like this in your app.js

   <Switch>
 { !isAuthenticated ?  <Route exact path="/login" component={LoginPage}/>
   : <ProtectedRoute exact path="/userfeed" component={UserFeed}/> }
  </Switch>