Cannot get mobx persist to work without decorators. Simple example

Question

I have a userStore class below.

import {observable, action, decorate, when, computed} from 'mobx'


import { requests, Scripts } from 'axios.js'

import { create, persist } from 'mobx-persist'

import userAltImage from 'images/user.png'


const hydrate = create({
  storage: localStorage,
  jsonify: false,
});

class UserStore {

        // scriptsPerRequest = 100
        // less_or_more = 'first'

        constructor(){
        }
        avatar = {
                file: userAltImage,
                width: '50px',
                height: '50px'

        }

        scripts = {
                self: []
        }

        setAvatar(file,width, height){
                this.avatar.file = file
                this.avatar.width = width

                this.avatar.height = height

        }

        // loadSelfScripts(){
        //      Scripts.byAuthor(1, this.scriptsPerRequest, this.less_or_more,)
        // }



}

decorate(UserStore,{
        avatar: [persist('object'), observable],
        scripts: [persist('object'), observable],
        setAvatar: action
})




var userStore = new UserStore()
hydrate('user', userStore ).then( () => console.log('userStore hydrated!'))


export default userStore

Later in a different componentX.js

I have this code

handledata = e =>{
    .....
    this.props.userStore.setAvatar(new_image_data, '50px', '50px')
}

When this runs, mobx works correctly and the userStore Avatar object has been successfully updated. But when I refresh the page, the data is lost... indicating that mobx persist is not working to persist the store even though the console says 'userStore hydrated' after the hydrate function runs.

What am I doing wrong? Please advise. I cannot get this to work.

Cannot get mobx persist to work without decorators. Simple example

0 Answers0