How to set state before render with react(redux)

Question

I want to make a component able to redirect when not loggedIn. Components were made with react, checking auth function works well with redux.

//App.js
class App extends Component {
  checkUserInfo () => {
    const loggedInfo = storage.get('loggedInfo');
    if(!loggedInfo) return;
    const { UserActions } = this.props;
    UserActions.setLoggedInfo(loggedInfo)
  }

  constructor(props) {
    super(props);
    this.checkUserInfo();
  }

  render() {
    console.log(this.props.logged)
    return(...)
  }
}

export default connect((state) => ({logged: state.user.get('logged')}, (dispatch)=> ...)

and UserActions.setLoggedInfo action is look like this.

...
export default handleActions({
  [SET_LOGGED_INFO]: (state, action) => {
    return state.set('logged', true)
  }
})
...

So, I want situation that component is redirected when auth is not logged in. I made a rendering component <Route/> with condition which is that if state.logged==false , <Redirect to='login/> .

But in very front point, logged is false before executing checkUserInfo function. so when I'm loggedIn, Redirect to /login , and when I'm not loggedIn, Redirect to /login too.

//PrivateRoute.js
...
  render() {
     const { logged } = this.props;
     console.log(logged);
     return(
      <Route path="/myPage" render={props =>
        logged ? <Component/> : <Redirect to={{pathname: '/login'}}/>
      }/>
    )
  }
...

this is screenshot what is logged value in console.

I want to skip very front state before set state by myFunction( checkUserInfo ), how can I do.

plz help me. and sorry to not good english syntax.

Answer 1

Set PrivateRoute like this

This could help to check auth in simple way.

Answer 2

You need to check your global state before rendering the private component.

render prop provided by Route is a good place for that

<Route path='/secretarea' render={() =>{
    return props.isLoggedIn ? <SecretComp /> : <Login />
}}/>