React Native App中的状态管理

时间:2018-02-28 16:34:52

标签: react-native redux react-navigation

我正在使用我正在使用的本地应用程序react-navigation 我的要求是我有4个不同的屏幕,如典型的实时评分应用

  • 屏幕1:当天的足球比赛列表
  • 屏幕2:足球比赛页面(记分卡,比赛统计等)
  • 屏幕3:Team Home(特定团队的比赛,相关新闻提要等)
  • 屏幕4:联赛之家(如足球世界杯,在联赛中有比赛,新闻等)

在此应用中,用户可以转到screen 1的任何匹配页面(屏幕2),他们可以从select 3screen 4转到另一个匹配(screen 2),喜欢n种可能性。

现在的问题是我正在使用具有全局存储的redux,每当用户进入新页面时,特定内容将在该状态下加载,如果他选择相同路径的另一页面,即... 2 screen2堆栈中的路由都将指向相同的状态片段,但这两个屏幕具有不同的匹配,我想要这个场景的架构建议主要与状态管理有关

Screen1 - >屏幕2 - >屏幕3 - > screen2 - > screen4 - > screen3 - > screen2 ......

如果屏幕堆栈如上所述,我该如何管理状态。如何克服这种复杂性,请提供宝贵的建议

1 个答案:

答案 0 :(得分:1)

通常,我会通过将id字段作为第二个(navigationState)参数传递来将路线数据与路线信息分离:

navigation.navigate("MatchPage", { matchId: matchId });

当您将状态映射到道具时,您可以使用第二个参数" ownProps",它接收传递给底层组件的道具,在本例中为{反应导航提供的{1}}参数:

navigationState

在此示例中,您的应用程序状态包含一个名为const matchContainer = connect( (state, ownProps) => { const id = ownProps.navigation.state.params.matchId; const match = state.matches[id]; return { match }; } ); const MatchPageContainer = matchContainer(MatchPage); 的对象,由matches键控,您可以使用该对象查找特定于匹配的信息。这是一种常见做法,但您的里程可能会有所不同。