Question

我想就你们如何基于副作用动态导航你的应用程序得到一些意见。

例：
LoginScreen - 用户输入email / pw并提交。我使用Sagas来处理我的副作用，所以当用户从api成功验证并且我的Redux商店相应更新时，我想将我的用户推进到HomeScreen。

解决方案1：
将React Navigation绑定到Redux，我可以从我的Saga发送导航调用来处理我的登录请求/响应。虽然这看起来最简单，但似乎它可能会因为导航遍布整个组件和传奇等而失控。

解决方案2：
将所有导航调用保留在组件级别，并在Redux的支持更新时，做出相应的反应并根据用户对象向前导航。

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

Answer 1

目前使用thunk执行此操作，但这完全取决于您设置loginState的方式。

我的loginState看起来像这样。

2147483647

登录thunk看起来像https://gist.github.com/iRoachie/7b6d5f33d9c9c8385f6f47822e7cea2f。

如果登录成功，那么我在reducer中设置interface LoginState { authenthicated: boolean logging: boolean error: string key: string }。然后在我连接到redux的登录屏幕上，我使用componentDidUpdate检查是否authenticated: true，然后导航到主屏幕。

authenticated === true

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

Answer 2

使用封装组件处理身份验证通常更容易。例如，在您的路线中：

<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组件将连接到Redux存储，以便从当前状态适当地设置authenticated属性。

这有许多优点，因为您无需担心导航。支持用户从深层网址（例如/something/else加载应用程序，而不仅仅是/）也很容易，并且一旦用户成功通过身份验证，相关路线就会自动显示。

在React Native中使用Redux和Sagas / Thunks处理导航的位置？

2 个答案: