title: mobx-persist not persist my data in local storage
body: <p>Recently i'm working with Mobx and works well but when refresh the page the data lost and is fine this but i want to retain data in localStorage. Mobx-persist is for save data in localStorage and i implemented it in my project but doesn't work and i don't why.</p>
  <p>this is my authStore:</p>
  <pre><code>import { observable, action } from 'mobx';
  import { fireauth } from '../config/firebase';
  import { persist } from 'mobx-persist'
  
  
  class AuthStore {
      @persist @observable authState = false;
      @persist @observable title = &quot;Dashboard&quot;;
      @persist @observable img = &quot;&quot;;
      @persist('object') @observable userAuth = {useremail: &quot;&quot;, userpass: &quot;&quot;};
  
      @action handleChange = (value, event) =&gt; {
          this.userAuth[value] = event.target.value;
      }
  
      @action submit = () =&gt; {
          fireauth.signInWithEmailAndPassword(this.userAuth[&quot;useremail&quot;], this.userAuth[&quot;userpass&quot;]).then(() =&gt; {
              this.authState = true;
              console.log(this.authState);
          }).catch(function(error) {
              // Handle Errors here.
              var errorCode = error.code;
              var errorMessage = error.message;
  
              console.log({ errorCode, errorMessage })
              // ...
          });
  
          this.authState = true;
          alert(this.authState)
      }
  
      @action logout = () =&gt; {
          fireauth.signOut().then(() =&gt; {
              this.authState = false;
              console.log(&quot;si&quot;)
            }).catch((error) =&gt; {
              console.log(error)
            });
      }
  }
  
  export default AuthStore;
  </code></pre>
  <p>and i have a rootStore too:</p>
  <pre><code>import { create } from 'mobx-persist';
  
  import AuthStore from './authStore.js';
  
  const hydrate = create({
    storage: localStorage,
  });
  
  export class RootStore {
      authStore = new AuthStore(this);
  
      constructor() {
          hydrate('auth', this.authStore)
      }  
  
  };
  
  export const RootStoreContext = new RootStore();
  </code></pre>
  <p>my index thath pass the root store:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  
  import { Provider } from 'mobx-react';
  
  import { RootStoreContext } from './store/rootStore';
  
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;Provider rootStore={ RootStoreContext } authStore={ RootStoreContext.authStore }&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  
  reportWebVitals();
  </code></pre>
  <p>And login component (where use the store and apply actions)</p>
  <pre><code>import React from 'react';
  import './index.css';
  import logo from '../../assets/img/logo-ondoo.png';
  import email from '../../assets/img/email-icon.svg';
  import secure from '../../assets/img/secure-icon.svg';
  import see from '../../assets/img/see-icon.svg';
  import  { inject, observer } from 'mobx-react';
  
  @inject('authStore')
  @observer
  class App extends React.Component {
      
      constructor(props) {
          super(props);
      }
  
      render () {
          return (
              &lt;div className=&quot;container&quot;&gt;
                  &lt;div className=&quot;login-form&quot;&gt;
                      &lt;div className=&quot;login-logo&quot;&gt;
                          &lt;img src={ logo }&gt;&lt;/img&gt;
                          &lt;p&gt;Productividad al alcance de tu mano&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;login-form-div&quot;&gt;
                          &lt;form &gt;
                              &lt;div className=&quot;text-input-content&quot;&gt;
                                  &lt;img src={ email } id=&quot;username&quot; name=&quot;username&quot; className=&quot;text-input-lefticon&quot;/&gt;
                                  &lt;input type=&quot;text&quot; placeholder=&quot;Correo electrónico&quot; onChange={ (e) =&gt; this.props.authStore.handleChange(&quot;useremail&quot;, e)} /&gt;
                              &lt;/div&gt;
  
                              &lt;div className=&quot;text-input-content&quot;&gt;
                                  &lt;img src={ secure } className=&quot;text-input-lefticon&quot; /&gt;
                                  &lt;input type=&quot;text&quot; id=&quot;password&quot; placeholder=&quot;Contraseña&quot; onChange={ (e) =&gt; this.props.authStore.handleChange(&quot;userpass&quot;, e)}/&gt;
                                  &lt;img src={ see } className=&quot;text-input-righticon&quot; /&gt;
                              &lt;/div&gt;
  
                              &lt;div&gt;
                                  &lt;input className=&quot;button-enter&quot; onClick={this.props.authStore.submit} type=&quot;button&quot; value=&quot;Entrar&quot;&gt;&lt;/input&gt;
                              &lt;/div&gt;
  
                              &lt;div&gt;
                                  &lt;input className=&quot;button-enter&quot; onClick={this.props.authStore.logout} type=&quot;button&quot; value=&quot;Entrar&quot;&gt;&lt;/input&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  <p>I implement hydrate and all of mobx-persist but localStorage not save the data. I've been searching the interet but I can't find the solution.</p>
  <p>Does anyone know why this happens?</p>
  <p>thanks.</p>