React - 针对不同导航级别的redux或local状态

时间:2017-05-05 07:29:53

标签: reactjs react-native navigation redux

我使用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上的数据,但是当更改选项卡时,应该忘记表单数据。
  • FormPage1创建一个webRequest,并根据请求重定向到formPage2。因此,表单必须显示加载器并跟踪请求状态。如果在请求处于进程中时更改了选项卡,则应放弃该请求。如果请求状态为redux,则可能更难做到。

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

  • 路线。我认为我将主要路线存储在redux中,其他路由存储在本地状态。
  • 表格数据。我考虑将其存储到formView的本地状态。
  • 表单UI状态。也许是formPage1中的本地州?

更新,额外问题:

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

1 个答案:

答案 0 :(得分:1)

我认为Redux先生本人的回应仍然适用于此: https://github.com/reactjs/redux/issues/1287#issuecomment-175351978

  

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

一般来说,如果状态仅与一个父组件相关,并且从那里开始只有一个或两个级别,则最好保持本地状态。 如果该父组件的兄弟姐妹或其他更高级别或应用程序中的其他组件可以触及该状态,则它可能是Redux的良好候选者。

将此与您的应用相关联,我认为您已经有了正确的想法。特别是当观点在导航时失去状态时,在全球商店中保持这种状态真的没有意义。

路由往往是全球关注的问题,这就是为什么react-router-redux非常受欢迎,以便在redux存储中保持路由状态。 但是,由于你的标签不应该是全局可访问的(除非将来可能会改变吗?),所以在本地保持该路由状态仍然更清晰,我要说。