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

【问题标题】：Where to handle navigation in React Native with Redux and Sagas/Thunks?在 React Native 中使用 Redux 和 Sagas/Thunks 在哪里处理导航？
【发布时间】：2023-09-14 07:19:01
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： react-native redux redux-thunk react-navigation redux-saga

【解决方案1】：

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

我的 loginState 如下所示。

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

如果登录成功，那么我在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' })],
    })
  )
}

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

【讨论】：

这基本上就是我目前处理它的方式，尽管我没有单独的 loginState，只是一个带有选择器的 userState，用于根据用户是否具有有效令牌来确定已验证。我喜欢 loginState 的想法，不过对于我的应用程序来说，谢谢你的想法！
没问题，伙计！如果答案为您解决了问题，请不要忘记将其标记为已回答。

【解决方案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，而不仅仅是/）加载您的应用程序也很容易，并且一旦用户成功通过身份验证，相关路由将自动显示。

【讨论】：

我想过类似的事情，但是，我的实际应用程序有 3 个屏幕，其中包括堆栈导航器内的登录过程，然后是第 4 个屏幕作为经过身份验证的屏幕，其中包含一个选项卡导航器（就 React Navigation 而言）。
您的答案不是针对反应导航和反应本机。然而，这在网络上将是一个很好的解决方案。