如何使用react（redux）在渲染之前设置状态

Question

我希望使组件能够在未登录时进行重定向。 组件是用react制成的，检查auth函数是否可以与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)=> ...)

和UserActions.setLoggedInfo的操作看起来像这样。

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

因此，我希望在未登录auth时重定向该组件的情况。我制作了呈现组件<Route/>，条件是if state.logged==false，<Redirect to='login/>。

但是最重要的一点是，在执行checkUserInfo函数之前，logging为false。因此，当我登录时，重定向到/login，而当我未登录时，也重定向到/login。

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

这是屏幕快照，它在控制台中的值为logged。

我想在通过myFunction（checkUserInfo）设置状态之前跳过最前面的状态，该怎么办。

请帮助我。 对不起，英语语法不好。

Answer 1

将PrivateRoute设置为this

这可能有助于以简单的方式检查身份验证。

Answer 2

在呈现私有组件之前，您需要检查全局状态。

render提供的

Route道具是一个很好的地方

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