如何在使用 react(redux) 渲染之前设置 state

Question

我想让一个组件在未登录时能够重定向。 组件是用反应制成的，检查 auth function 与 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)
  }
})
...

所以，我想要在未登录身份验证时重定向组件的情况。我制作了一个渲染组件<Route/> ，条件是if state.logged==false ， <Redirect to='login/> 。

但在最前面，在执行checkUserInfo function 之前记录为假。 所以当我登录时，重定向到/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 ) 设置 state 之前跳过非常前面的 state，我该怎么办。

请帮助我。 很抱歉英语语法不好。

Answer 1

像这样设置 PrivateRoute

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

Answer 2

在渲染私有组件之前，您需要检查您的全局 state。

Route提供的render prop 是一个很好的地方

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