Как загрузить состояние mobx из json?

Question

Я хочу сохранить свое состояние mobx в браузере localStorage, поэтому, если я использую этот подход { ссылка }
Я сохраняю хранилище в JS, но не знаю, как его применить Это. С extendObservable я получаю следующую ошибку Error: [mobx] 'extendObservable' can only be used to introduce new properties. Use 'set' or 'decorate' instead
Заранее спасибо.

Мой подход таков:

class MyStore {
...
  public async load() {
      const cached = await browser.storage.local.get("cache");
        const data = JSON.parse(cached["cached"]);
        Object.keys(data).forEach(x => {
          (this as any)[x] = (data as any)[x];
       });
...
}

Но я думаю, что это anitpattern.

Answer 1

Вы уверены, что exteObservable не работает? Я использовал что-то подобное в своем коде.

class MyStore {
  async load() {
      const cached = await browser.storage.local.get("cache");
      mobx.extendObservable(this, cached);
  }
}

Редактировать :

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

Я реализовал функцию загрузки, основанную на простом forEach; Попробуйте следующее.

load = async () => {
    const { cache } = await JSON.parse(localStorage.getItem("cache"));

    Object.keys(cache).forEach(key => {
      this[key] = cache[key];
    });
  };

CodeSandbox https://codesandbox.io/s/late-snow-xppx0?ontsize=14&hidenavigation=1&theme=dark

Answer 2

Если у вас есть класс и «необработанные» данные json, то я делаю, чтобы принимать необработанные данные в конструкторе и затем обновлять свойства класса.

Например, мои необработанные данные выглядит так:

{
  users: [
    { id: 1, firstName: 'foo', lastName: 'bar', customer: { id: 1, name: 'bla' } },
    { id: 2, firstName: 'foo2', lastName: 'bar2', customer: { id: 2, name: 'customer' } },
  ];
}

class User {
  id;
  @observable firstName;
  @observable lastName;
  customer;

  constructor(rawUser) {
    this.id = rawUser.id;
    this.firstName = rawUser.firstName;
    this.lastName = rawUser.lastName;
    this.customer = new Customer(rawUser.customer);
  }
}

class UsersStore {
  @observable users = [];

  constructor(rawUsers) {
    this.users = rawUsers.map(rawUser => new User(rawUser));
  }
}

Затем, когда я восстанавливаю данные, я просто использую

const usersStore = new UsersStore(rawData.users);

круто вещь в этом подходе вложенность , каждый «уровень» обрабатывает свою часть.