Как сохранить состояние Mobx в sessionStorage

Question

Попытка по существу выполнить этот https://github.com/elgerlambert/redux-localstorage, который предназначен для Redux, но сделать это для Mobx. И желательно использовать sessionStorage. Есть ли простой способ сделать это с минимальным шаблоном?

Answer 1

Самый простой способ приблизиться к этому будет заключаться в том, чтобы активировать «автозапуск» mobx всякий раз, когда изменяется любое наблюдаемое свойство. Для этого вы можете следовать my answer to this question.

Я положу некоторые примеры кода здесь, которые должны помочь вам начать работу:

function autoSave(store, save) { 
    let firstRun = true; 
    mobx.autorun(() => { 
    // This code will run every time any observable property 
    // on the store is updated. 
    const json = JSON.stringify(mobx.toJS(store)); 
    if (!firstRun) { 
     save(json); 
    } 
    firstRun = false; 
    }); 
} 

class MyStore { 
    @mobx.observable prop1 = 999; 
    @mobx.observable prop2 = [100, 200]; 

    constructor() { 
    this.load(); 
    autoSave(this, this.save.bind(this)); 
    } 

    load() { 
    if (/* there is data in sessionStorage */) { 
     const data = /* somehow get the data from sessionStorage or anywhere else */; 
     mobx.extendObservable(this, data); 
    } 
    } 

    save(json) { 
    // Now you can do whatever you want with `json`. 
    // e.g. save it to session storage. 
    alert(json); 
    } 
} 

Answer 2

проводки пример отсюда: https://mobx.js.org/best/store.html

Это показывает более чистый способ обнаружения изменения стоимости, хотя и не обязательно локальное хранилище.

import {observable, autorun} from 'mobx'; 
import uuid from 'node-uuid'; 

export class TodoStore { 
    authorStore; 
    transportLayer; 
    @observable todos = []; 
    @observable isLoading = true; 

    constructor(transportLayer, authorStore) { 
     this.authorStore = authorStore; // Store that can resolve authors for us 
     this.transportLayer = transportLayer; // Thing that can make server requests for us 
     this.transportLayer.onReceiveTodoUpdate(updatedTodo => this.updateTodoFromServer(updatedTodo)); 
     this.loadTodos(); 
    } 

    /** 
    * Fetches all todo's from the server 
    */ 
    loadTodos() { 
     this.isLoading = true; 
     this.transportLayer.fetchTodos().then(fetchedTodos => { 
      fetchedTodos.forEach(json => this.updateTodoFromServer(json)); 
      this.isLoading = false; 
     }); 
    } 

    /** 
    * Update a todo with information from the server. Guarantees a todo 
    * only exists once. Might either construct a new todo, update an existing one, 
    * or remove an todo if it has been deleted on the server. 
    */ 
    updateTodoFromServer(json) { 
     var todo = this.todos.find(todo => todo.id === json.id); 
     if (!todo) { 
      todo = new Todo(this, json.id); 
      this.todos.push(todo); 
     } 
     if (json.isDeleted) { 
      this.removeTodo(todo); 
     } else { 
      todo.updateFromJson(json); 
     } 
    } 

    /** 
    * Creates a fresh todo on the client and server 
    */ 
    createTodo() { 
     var todo = new Todo(this); 
     this.todos.push(todo); 
     return todo; 
    } 

    /** 
    * A todo was somehow deleted, clean it from the client memory 
    */ 
    removeTodo(todo) { 
     this.todos.splice(this.todos.indexOf(todo), 1); 
     todo.dispose(); 
    } 
} 

export class Todo { 

    /** 
    * unique id of this todo, immutable. 
    */ 
    id = null; 

    @observable completed = false; 
    @observable task = ""; 

    /** 
    * reference to an Author object (from the authorStore) 
    */ 
    @observable author = null; 

    store = null; 

    /** 
    * Indicates whether changes in this object 
    * should be submitted to the server 
    */ 
    autoSave = true; 

    /** 
    * Disposer for the side effect that automatically 
    * stores this Todo, see @dispose. 
    */ 
    saveHandler = null; 

    constructor(store, id=uuid.v4()) { 
     this.store = store; 
     this.id = id; 

     this.saveHandler = reaction(
      // observe everything that is used in the JSON: 
      () => this.asJson, 
      // if autoSave is on, send json to server 
      (json) => { 
       if (this.autoSave) { 
        this.store.transportLayer.saveTodo(json); 
       } 
      } 
     ); 
    } 

    /** 
    * Remove this todo from the client and server 
    */ 
    delete() { 
     this.store.transportLayer.deleteTodo(this.id); 
     this.store.removeTodo(this); 
    } 

    @computed get asJson() { 
     return { 
      id: this.id, 
      completed: this.completed, 
      task: this.task, 
      authorId: this.author ? this.author.id : null 
     }; 
    } 

    /** 
    * Update this todo with information from the server 
    */ 
    updateFromJson(json) { 
     // make sure our changes aren't send back to the server 
     this.autoSave = false; 
     this.completed = json.completed; 
     this.task = json.task; 
     this.author = this.store.authorStore.resolveAuthor(json.authorId); 
     this.autoSave = true; 
    } 

    dispose() { 
     // clean up the observer 
     this.saveHandler(); 
    } 
} 

Answer 3

Здесь вы можете использовать мой код, хотя он поддерживает только localStorage, и вы можете легко его модифицировать.

https://github.com/nightwolfz/mobx-storage

Answer 4

Может быть, вы можете попробовать mobx-sync, который написал сам.