我正在使用react-navigation
,而没有redux
。所以我有两个选项卡,每个选项卡都有自己的堆栈导航器,每个选项卡都有一个屏幕。所以我需要两个屏幕中的locations
数组。目前,我在两个屏幕上都这样做:
state = { locations: [] };
componentDidMount() {
this.getAllLocations();
}
async getAllLocations() {
let locations = await this.getMoviesFromApi();
this.setState({ locations });
}
我只想将此数组放在一个位置,并且两个组件都应该共享这一单一的事实来源。因此,任一屏幕所做的更改都会反映在另一屏幕上。不用redux可以吗?
答案 0 :(得分:2)
有一个单例对象是可能的:
export default class SharedData {
constructor(){
if(SharedData.instance){
return SharedData.instance;
}
this.state = {locations:[]};
this.listners =[];
SharedData.instance = this;
return SharedData.instance;
}
setLocations(locations){
this.state.locations = locations;
this.listners.forEach(listner=>listner(this.state.location));
}
getLocations(){
return this.state.locations;
}
addListner(listner){
this.listners.push(listner);
return listner;
}
removeListner(listner){
let index = this.listners.indexOf(listner);
if(index > -1){
this.listners.splice(index,1);
}
}
}
,然后在要访问共享位置的每个标签中显示状态:
// get an instance of SharedData
this.sharedData = new SharedData();
// subscribe to locations changes
this.listner = sharedData.addListner((locations)=>{
this.setState({locations});
});
// set locations
this.sharedData.setLocations([]);
// unregister when destroying the component
this.sharedData.removeListner(this.listner);
答案 1 :(得分:1)
RN 0.59的发布带来了极大的可能性。其中之一是react钩子,最新版本中提供了该钩子...将来,react钩子将在所有地方使用。相信我。因此,不久前,我寻找了使用react hooks拥有全局状态的可能性,并找到了reactn库。它使用react本机挂钩,甚至您都可以在CLASS组件中使用全局状态。这为主题化和共享数据打开了新的大门。现在,我的应用程序支持亮/暗模式,动态字体大小,语言以及仅使用此库的“门户”的早期实现。
关于它的最好的部分是您可以像状态一样使用它。不需要提供程序或redux的东西(尽管它提供了它)。它可以与react导航集成(它最多需要修改一些源代码,添加“ n”来进行响应,并引用全局变量)。很棒,我喜欢。
我一直在思考关于此的文章,因为lib在RN社区中并不那么流行,但是希望您能给它一个机会,该库只有22KB,少于一个完整的组件。
作为替代方案,您可以考虑使用钩子编写自己的库。但这会很难。试试吧,没有回头路
答案 2 :(得分:0)
我想为了实现您的目标,您将需要某种存储“全局数据”的机制,如果您不喜欢Redux,因为它需要大量设置才能实现此简单的共享任务全球数据,那么您应该unstated ... ...这很容易设置