Question

这是我的启动页面中的代码，用于使用先前的jwt令牌自动登录用户，它使用redux，它的工作原理是数据延迟一到两秒...

我想重构为：

-仅在用户数据this.props.getUser（token）有效且可用时重定向到TabNavigator。

async _login() {
    const token = await AsyncStorage.getItem('token');
    if(token > '') {
        const user = await this.props.getUser(token);
        this.redirectScreen('TabNavigator');
    } else {
        this.redirectScreen('Login');
    }
}

代码： https://gist.github.com/andraskende/370d64f19bb9c4ab830cfb537c21b439

Answer 1

def brute_force_MVC(vertices, edges): bin_input=["000","001","010","011","100","101","110","111"] for case in bin_input: for i, vertex in enumerate(vertices): if case[i]: #do stuff for edge in edges: #do more stuff调度redux操作。它不会为您返回用户对象。我可以为您提供2种选择：

选项1-在中间件中进行重定向

通过遵循本指南，可以从应用程序中的任何位置导航 https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html
分派操作，不执行以下操作：
```
this.props.getUser
```
当您在中间件（可能是很笨拙的）中处理async _login() { const token = await AsyncStorage.getItem('token'); if(token > '') { this.props.getUser(token); } else { this.redirectScreen('Login'); } }操作时，请按照步骤1中的指南进行重定向。

注意：也许您可以通过getUser操作将this.props.navigation作为有效负载传递，并在中间件中使用它。但是我还没有尝试过，也无法确认它是否有效。

选项2-使用componentWillReceiveProps

就像第一个选项一样，调度redux操作：
```
getUser
```
您已经订阅了async _login() { const token = await AsyncStorage.getItem('token'); if(token > '') { this.props.getUser(token); } else { this.redirectScreen('Login'); } }。因此，请在更新后进行重定向（前提是您已将其作为state.user操作逻辑的一部分进行了更新）。您可以使用getUser生命周期方法。
```
componentWillReceiveProps
```
注意：有一个称为componentWillReceiveProps(nextProps) { const oldUserProp = this.props.user || {}; const newUserProp = nextProps.user; // You might need more validation here if (!oldUserProp.userId && newUserProp.userId) { this.redirectScreen('TabNavigator'); } }的新生命周期方法。您可能也要检查一下。

我建议选项1 ，因为它更容易预测。

我还注意到您重置了路由器状态。您可能要在此用例中使用getDerivedStateFromProps。在react-navigation文档中有一个实现身份验证流的指南。请阅读https://reactnavigation.org/docs/en/auth-flow.html。

使用redux数据对登录用户重定向的本机启动页面进行反应

1 个答案: