在使用 Redux 和 Sagas/Thunks 的 React Native 中，在哪里处理导航？

Question

我想就你们如何根据副作用动态导航您的应用程序获得一些意见。

示例：
LoginScreen - 用户输入 email/pw 并提交。我正在使用 Sagas 来处理我的副作用，因此当用户从 api 成功通过身份验证并且我的 Redux 商店相应更新时，我想将我的用户推进到主屏幕。

解决方案 1：
通过绑定到 Redux 的 React Navigation，我可以从我的 Saga 发送一个导航调用来处理我的登录 request/response。虽然这看起来最简单，但它似乎也可能会因为导航遍及组件和 sagas 等而失控。

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

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

Answer 1

目前正在使用 thunk 执行此操作，但这完全取决于您如何设置 loginState。

我的登录状态是这样的。

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

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

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

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

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

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 属性。

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

在使用 Redux 和 Sagas/Thunks 的 React Native 中，在哪里处理导航？

Where to handle navigation in React Native with Redux and Sagas/Thunks?

react-native

redux

redux-thunk

redux-saga

react-navigation