React本地应用程序中的状态管理
React本地应用程序中的状态管理
提问于 2018-02-28 16:34:52
我正在开发一个使用react-navigation的react本地应用程序，我的要求是我有4个不同的屏幕，就像一个典型的Live应用程序
- 屏幕1:当天的足球比赛清单
- 屏幕2:足球比赛页面(记分卡，游戏统计等)
- 屏幕3: team (特定球队的比赛，相关的新闻提要等)
- 屏幕4:联赛主场(如世界杯足球赛、联赛比赛、新闻等)
在这个应用程序中，用户可以从screen 1转到任何匹配页面( Match Page，screen 1)，在那里他们可以从select 3或screen 4到另一个匹配页面( (screen 2) )，就像n种可能性一样。
现在的问题是，我使用的是redux，它将有一个全局存储，每当用户进入一个新页面时，特定的内容将被加载到状态中，如果他选择了另一个相同路径的页面，即.堆栈中的2条screen2路由都将指向相同的状态片段，但是这两个屏幕的匹配是不同的，我想为这个场景提供一个主要与状态管理相关的体系结构建议。
Screen1 -> Screen2 ->screen3 -> screen2 -> screen4 ->screen3 -> screen2 .
如果屏幕堆栈类似于上面的内容，我如何管理状态。PLease为我提供了如何克服这种复杂性的宝贵建议。
回答 1
Stack Overflow用户
发布于 2018-02-28 17:30:38
通常，我会通过传递类似于id字段的第二个(navigationState)参数，将路由数据与路由信息解耦：
navigation.navigate("MatchPage", { matchId: matchId });当您将状态映射到道具时，您可以使用第二个参数"ownProps"，它接收传递给底层组件的支持，在本例中是react导航提供的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键控，可用于查找匹配特定信息。这是一个常见的做法，但你的里程可能会有所不同。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49034374
复制相关文章
相似问题
腾讯云开发者
