React - 不同导航级别的 redux 或本地状态

Question

我正在使用 react native 和 redux 制作一个非常简单的应用程序。我想知道，我应该如何管理状态，尤其是导航。我知道这是一个高度基于意见的问题，但我相信这对我理解 redux 至关重要。导航结构是这样的：

                                app                          
                            /    |   \
                  role1View    login   role2View
                 /        \
          formView        logView
          /      \
  formPage1     formPage2

导航中需要考虑的事项：

• 有 3 个顶级视图：login、role1View 和 role2View。根据登录角色选择正确的视图。应该也可以从子视图导航到这些视图，因此我计划将此路由信息保留在 redux 中。
• role1View 有 2 个选项卡：formView（默认）和 logView。应该无法直接导航到这些视图，而只能使用选项卡通过 UI。选项卡不会以编程方式更改。
• formPage1（默认）和 formPage2 是 formView 选项卡上的子视图。 FormPage2 需要将数据保存在 formPage1 上，但是当 tab 改变时，表单数据应该会被遗忘。
• FormPage1 发出 webRequest，并根据请求重定向到 formPage2。因此，表单必须显示加载程序并跟踪请求状态。如果在请求过程中更改了选项卡，则应放弃该请求。如果请求状态是 redux，这可能会更难做到。

所以问题是，我应该存储在 redux 还是本地状态

• 路线。我想我会将主要路线存储在 redux 中，而其他路线则存储在本地状态中。
• 表格数据。我正在考虑将其存储到 formView 的本地状态。
• 表单 UI 状态。可能是 formPage1 中的本地状态？

更新，额外的问题：

需要添加从formPage2 到formPage1 的向上导航（左上角的箭头）。 Android工具栏定义在更高级别（app）上，向上按钮可见性存储到redux。我应该如何/在哪里处理向上按钮点击？

Answer 1

我认为 Redux 先生本人的回答仍然适用于这里的最佳实践： https://github.com/reactjs/redux/issues/1287#issuecomment-175351978

将 React 用于对应用程序全局无关且不会以复杂方式发生变化的短暂状态。例如，某些 UI 元素中的切换、表单输入状态。将 Redux 用于全局重要或以复杂方式发生变异的状态。例如，缓存的用户或帖子草稿。

因此，一般来说，如果状态仅与一个父组件和从那里向下的一两个级别相关，则最好将其保留在本地。 如果该状态可以被该父组件的兄弟姐妹或应用程序中更高级别或其他位置的其他组件触及，那么它可能是 Redux 的一个很好的候选者。

将此与您的应用相关联，我认为您已经有了正确的想法。尤其是当视图在导航时丢失状态很好时，将状态保存在全局存储中确实没有意义。

路由往往是一个全球性的问题，这就是为什么 react-router-redux 非常受欢迎的原因，以将路由状态保留在 redux 存储中。 但是，由于您的选项卡不应该在全球范围内可访问（除非将来可能会改变？），所以在本地保持该路由状态仍然更清洁，我会说。