I am trying to persist my mobx state in my react native app. It works most of the time but there are often errors where I have to create empty stores and lose the state. I would love some advice on how to better achieve this or if anyone has any idea of what could be causing this.
Here is how I am doing it.
main.tsx
AppRegistry.registerComponent(APP_NAME, () => RootComponent)
root-component.tsx
export class RootComponent extends React.Component<{}, IRootComponentState> {
public async componentDidMount(): Promise<void> {
SplashScreen.hide()
this.setState({ rootStore: await setupRootStore() })
}
setup-root-store.ts
const ROOT_STATE_STORAGE_KEY = "root"
export async function setupRootStore(): Promise<IRootStore> {
let rootStore: IRootStore
let data: any
const env = await createEnvironment()
try {
data = (await storage.load(ROOT_STATE_STORAGE_KEY)) || {}
rootStore = RootStoreModel.create(data, env)
} catch {
/// Errors out here
rootStore = RootStoreModel.create({}, env)
}
if (__DEV__) {
env.reactotron.setRootStore(rootStore, data)
}
onSnapshot(rootStore, (snapshot) => storage.save(ROOT_STATE_STORAGE_KEY, snapshot))
return rootStore
}
There are times when it errors in the catch block and then I am just reinstating with empty stores. I have tried to log the catch error but its always undefined
Thanks!