如何解决React-native应用程序中的不同Mobx存储实例
在我的react-native中,我使用mobx进行状态管理的唯一事实来源,应用由多个mobx存储组成,我想对其进行设置,以便存储可以使用自定义钩子useStore进行通信。
我的问题是,如果我将保留商店的相同实例,如果我有多个mobx商店的实例,我将无法使用afaik,调试状态会出现问题...
在商店内,我可以呼叫另一个商店(例如postStore的spinnerStore):
export class PostStore
{
globalStore;
@observable posts = [];
constructor(globalStore)
{
this.globalStore = globalStore;
}
@action.bound getPosts = flow(function * (payload)
{
this.globalStore.spinnerStore.setData({ status: 1 });
try
{
this.globalStore.spinnerStore.setData({ status: 2 });
let response = yield axios.get('/api/posts',{ params: payload });
this.posts = response.data.posts;
return response;
}
catch (error) {
console.error(error);
this.globalStore.spinnerStore.setData({ status: 3 });
throw error;
}
})
}
在我的组件中(通过useStore()钩子
import { useStore } from '@hooks/use-store';
function App()
{
const globalStore = useStore();
return (
<SafeAreaView style={[ globalStyles.androidSafeArea ]}>
<NavigationContainer>
<Text style={{ color:'red',fontSize:20 }}>{ globalStore.venueStore.badgeCount }</Text>
</NavigationContainer>
</SafeAreaView>
);
}
export default App;
index.js
import React from 'react'
import { configure } from 'mobx';
import globalStore from '../stores/GlobalStore.js'
export const storesContext = React.createContext(globalStore);
configure({ enforceActions: "observed" });
GlobalStore.js
import { PostStore } from '../stores/PostStore.js'
import { VenueStore } from '../stores/VenueStore.js'
class GlobalStore
{
postStore;
venueStore;
constructor()
{
this.postStore = new PostStore(this);
this.venueStore = new VenueStore(this);
}
}
export default new GlobalStore;
最后一件,使用Store钩子
import React from 'react'
import { storesContext } from '../contexts/index.js'
export const useStore = () => React.useContext(storesContext);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。