Mobx - это решение для управления состоянием приложений JavaScript. Это позволяет нам наблюдать за значениями из магазина, а затем устанавливать значения, которые сразу же отражаются в магазине.

В этой статье мы рассмотрим, как создать Observable, который позволит нам подписаться на него, а затем изменить его значение.

Наблюдаемая функция

Функция Mobx observable принимает объект. Он также доступен в форме декоратора, где мы можем установить его значение напрямую.

Его можно использовать следующим образом:

  • observable(value)
  • @observable classProperty = value

Он возвращает различные типы значений в зависимости от того, какое значение передано. value может быть примитивными значениями JavaScript, ссылками, простыми объектами, экземплярами классов, массивами и картами.

К значениям, передаваемым в функцию observable, применяются некоторые правила преобразования. Это следующие:

  • Если value - это ES6 Map, то будет возвращена новая наблюдаемая карта. Наблюдаемые карты очень полезны, если мы хотим реагировать на изменения в конкретной записи, а также на добавление или удаление записей.
  • Если value - это ES6 Set, то будет возвращен новый наблюдаемый набор.
  • Если value является массивом, будет возвращен новый массив Observable.
  • Если value - объект без прототипа, все его текущие свойства станут наблюдаемыми.
  • Если value - это объект с прототипом, примитивом или функцией JavaScript, observable будет бросать. Вместо этого мы должны использовать наблюдаемые в штучной упаковке наблюдаемые.

Например, мы можем использовать observable следующим образом:

import { observable } from "mobx";
const map = observable.map({ foo: "value" });
map.observe(({ oldValue, newValue }) => console.log(oldValue, newValue));
map.set("foo", "new value");

В приведенном выше коде у нас есть функция observable.map для создания наблюдаемой карты.

Затем мы присоединяем к нему слушателя для просмотра значений с помощью функции observe. Слушатель дает нам объект со свойствами oldValue и newValue, чтобы мы могли их получить.

Когда мы звоним:

map.set("foo", "new value");

тогда мы увидим значения, записанные слушателем.

Мы также можем сделать что-то подобное с массивами:

import { observable } from "mobx";
const array = observable([1, 2, 3]);
array.observe(({ oldValue, newValue }) => console.log(oldValue, newValue));
array[1] = 5;

Мы передали массив функции observable, которая возвращает массив Observable. Затем мы можем вызвать observe, чтобы посмотреть его значения, как раньше.

Затем, когда мы вносим изменения в array, прослушиватель, который мы переходим в observe, будет регистрировать новые и старые значения.

Чтобы сделать примитивы наблюдаемыми, мы можем использовать метод box следующим образом:

import { observable } from "mobx";
const num = observable.box(3);
num.observe(({ oldValue, newValue }) => console.log(oldValue, newValue));
num.set(10);

В приведенном выше коде мы создали наблюдаемый примитив с методом box. Код для наблюдения за изменением значения такой же, как и раньше.

Затем мы можем использовать set, чтобы установить новое значение для примитива num Observable.

Декоратор @observable

Если наша кодовая база поддерживает ES7 или TypeScript, мы можем использовать декоратор @observable, чтобы сделать свойства класса наблюдаемыми.

Мы можем использовать их следующим образом:

import { observable, computed } from "mobx";
class Person {
  @observable firstName = "Jane";
  @observable lastName = "Smith";
  @computed get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}
const person = new Person();
console.log(person.firstName);
console.log(person.lastName);
console.log(person.fullName);

В приведенном выше коде мы создали класс Person, который имеет свойства Observable, как указано с помощью декоратора observable. У нас также есть computed свойство fullName, которое является геттером.

Затем мы создаем новый экземпляр Person и можем регистрировать значения.

Мы также можем установить значения, присвоив значение как обычно.

Чтобы использовать декораторы, мы можем использовать систему сборки, такую ​​как Parcel, а затем добавить пакеты @babel/core, @babel/plugin-proposal-class-properties, @babel/plugin-proposal-decorators и @babel/preset-env и все их в .babelrc в разделе plugins следующим образом:

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

Заключение

Мы можем создавать наблюдаемые значения с помощью объекта observable. Его можно использовать с различными типами объектов, если он используется с правильным методом для создания наблюдаемого значения.

Затем мы можем использовать метод observe для наблюдения за значением возвращаемого Observable и управления им.

Мы также можем использовать декоратор observable с классами для создания класса с наблюдаемыми свойствами.

Чтобы использовать декораторы, мы используем Babel или TypeScript.