React Native App中的状态管理

Question

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

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

在这个应用程序中，用户可以从screen 1转到任何匹配页面（screen2），在那里他们可以select 3或screen 4从哪里可以去另一场比赛(screen 2)，就像n种可能性一样。

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

Screen1 - > Screen2 - > Screen3 - > screen2 - > screen4 - > screen3 - > screen2 ......

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

Answer 1

通常我会通过传递类似id字段的东西作为第二个（navigationState）参数来将路线数据与路线信息分离：

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

当你将状态映射到props时，你可以使用第二个参数“ownProps”，它接收传递给底层组件的道具，在这种情况下是react-navigation提供的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的对象，由matchId键入，您可以使用该对象查找特定于匹配的信息。这是一种常见做法，但您的里程可能会有所不同。