What the best practice to check if all store local storage data is hydrate?

[idanlevi1]

I use isSynchronized to know if the persist data are hydrate I have a multi-stores and I don't see any example or information about isSynchronized in multiple stores

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import { Provider, observer } from 'mobx-react';
import { GameStore, UserStore } from './stores'
import RootComponent from './RootComponent';
import { isSynchronized } from 'mobx-persist-store';

const stores = { GameStore, UserStore };

const App = observer(() => {
  console.log("App")

  if (!isSynchronized(stores.GameStore) || !isSynchronized(stores.UserStore)) {
    return <p>Loading...</p>;
  }

  return (
    <Provider {...stores}>
      <Router>
        <Switch>
          <Route path='/' exact component={RootComponent} />
        </Switch>
      </Router>
    </Provider>
  );
})

export default App;

I used:

"mobx": "^6.1.8", "mobx-persist-store": "^0.5.30" "mobx-react": "^7.1.0"

[quarrant]

you are right isSynchronized not working with multiple stores, but your example is correctly

[idanlevi1]

you are right isSynchronized not working with multiple stores, but your example is correctly

@quarrant What about one synchronic function that returns when all list of stores are hydrate? it can save a lot of renders

[codeBelt]

@idanlevi1

• We are working on v1.0 https://github.com/quarrant/mobx-persist-store/tree/issue-36/stable-release
• Check out the example for v1.0 https://codesandbox.io/s/mobx-persist-store-version-1-f852w?file=/src/stores/User.store.ts

Let me know if how this new version works for you