在哪里处理React Native与Redux和Sagas/Thunk的导航？

我想获得一些关于你们如何基于副作用动态地导航你的应用程序的意见。在哪里处理React Native与Redux和Sagas/Thunk的导航？

示例：
LoginScreen - 用户输入email/pw并提交。我正在使用Sagas来处理我的副作用，所以当用户通过api成功验证并且我的Redux商店相应地更新后，我想让我的用户进入HomeScreen。

解决方案1：
将React导航绑定到Redux我可以从处理我的登录请求/响应的Saga派发导航调用。虽然这似乎是最简单的，它也似乎是它可以不可收拾具有整个组件和传奇导航蔓延等

解决方案2：
保留所有的导航要求在组件级，并在从终极版道具更新，根据用户对象作出相应的反应并向前导航。

在React Native中使用Redux和中间件（Sagas或Thunk）处理此问题是否有任何模式或最佳实践？

来源

2017-07-26 basudz

目前这样做与thunk，但它都取决于你如何设置loginState。

我的loginState看起来像这样。

interface LoginState { 
    authenthicated: boolean 
    logging: boolean 
    error: string 
    key: string 
}

登录thunk的样子看这https://gist.github.com/iRoachie/7b6d5f33d9c9c8385f6f47822e7cea2f。

如果登录成功，那么我在减速器中设置authenticated: true。然后在我连接到REDX的登录屏幕上，我使用componentDidUpdate来检查是否authenticated === true，然后导航到主屏幕。

if (this.props.loginState.authenthicated === true) { 
    this.props.navigation.dispatch(
    NavigationActions.reset({ 
     index: 0, 
     actions: [NavigationActions.navigate({ routeName: 'Main' })], 
    }) 
) 
}

我总是用它来管理加载屏幕，但基本上就是这样。

来源

2017-07-26 15:28:34

这基本上是我目前如何处理它，虽然我没有单独的loginState，只是一个带有选择器的userState，以根据用户是否具有有效标记来确定身份验证。我喜欢loginState的想法，但对于我的应用程序，感谢这个想法！ – basudz

可靠的人！如果答案为您解决了问题，请不要忘记标记为已回答。 –

使用封装组件处理认证通常更容易。例如，在你的路由：

<Route path="/" component={Auth}> 
... 
</Route>

然后你Auth组件看起来是这样的：

class Auth extends React.Component { 
    render() { 
    // Show children if user is authenticated 
    if (this.props.authenticated) { 
     return this.props.children; 
    } 

    // Show login component/screen if user is not authenticated 
    return (
     <Login/> 
    ); 
    } 
}

的Auth组件将连接到您的终极版商店从当前状态设置适当的authenticated属性。

这有很多好处，因为您不必担心导航。支持用户从深层URL（例如/something/else，而不仅仅是/）加载您的应用程序也很容易，并且一旦用户成功通过认证，相关路线将自动显示。

来源

2017-07-26 15:46:35

我曾经想过类似的东西，但是，我的实际应用程序有3个屏幕，它们包含堆栈导航器中的登录过程，然后是第4个屏幕，作为包含标签导航器的验证屏幕（就反应导航而言）。 – basudz

你的答案并非针对反应原生导航。然而，这将是一个很好的解决方案。 –

在哪里处理React Native与Redux和Sagas/Thunk的导航？

回答

相关问题