mobx-persist not persist my data in local storage

Question

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.

this is my authStore:

import { observable, action } from 'mobx';
import { fireauth } from '../config/firebase';
import { persist } from 'mobx-persist'


class AuthStore {
    @persist @observable authState = false;
    @persist @observable title = "Dashboard";
    @persist @observable img = "";
    @persist('object') @observable userAuth = {useremail: "", userpass: ""};

    @action handleChange = (value, event) => {
        this.userAuth[value] = event.target.value;
    }

    @action submit = () => {
        fireauth.signInWithEmailAndPassword(this.userAuth["useremail"], this.userAuth["userpass"]).then(() => {
            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 = () => {
        fireauth.signOut().then(() => {
            this.authState = false;
            console.log("si")
          }).catch((error) => {
            console.log(error)
          });
    }
}

export default AuthStore;

and i have a rootStore too:

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();

my index thath pass the root store:

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(
  <React.StrictMode>
    <Provider rootStore={ RootStoreContext } authStore={ RootStoreContext.authStore }>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

And login component (where use the store and apply actions)

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 (
            <div className="container">
                <div className="login-form">
                    <div className="login-logo">
                        <img src={ logo }></img>
                        <p>Productividad al alcance de tu mano</p>
                    </div>

                    <div className="login-form-div">
                        <form >
                            <div className="text-input-content">
                                <img src={ email } id="username" name="username" className="text-input-lefticon"/>
                                <input type="text" placeholder="Correo electrónico" onChange={ (e) => this.props.authStore.handleChange("useremail", e)} />
                            </div>

                            <div className="text-input-content">
                                <img src={ secure } className="text-input-lefticon" />
                                <input type="text" id="password" placeholder="Contraseña" onChange={ (e) => this.props.authStore.handleChange("userpass", e)}/>
                                <img src={ see } className="text-input-righticon" />
                            </div>

                            <div>
                                <input className="button-enter" onClick={this.props.authStore.submit} type="button" value="Entrar"></input>
                            </div>

                            <div>
                                <input className="button-enter" onClick={this.props.authStore.logout} type="button" value="Entrar"></input>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

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.

Does anyone know why this happens?

thanks.

Answer 1

It's because mobx-persist doesn't work with the newer version of mobx.

Versions that i'm using:

mobx: ^3.4.1
mobx-persist: ^0.4.1
mobx-react: ^4.3.5

And works well.