Mobx - это решение для управления состоянием приложений JavaScript. Это позволяет нам наблюдать за значениями из магазина, а затем устанавливать значения, которые сразу же отражаются в магазине.
В этой статье мы рассмотрим, как создать Observable, который позволит нам подписаться на него, а затем изменить его значение.
Наблюдаемая функция
Функция Mobx observable
принимает объект. Он также доступен в форме декоратора, где мы можем установить его значение напрямую.
Его можно использовать следующим образом:
observable(value)
@observable classProperty = value
Он возвращает различные типы значений в зависимости от того, какое значение передано. value
может быть примитивными значениями JavaScript, ссылками, простыми объектами, экземплярами классов, массивами и картами.
К значениям, передаваемым в функцию observable
, применяются некоторые правила преобразования. Это следующие:
- Если
value
- это ES6Map
, то будет возвращена новая наблюдаемая карта. Наблюдаемые карты очень полезны, если мы хотим реагировать на изменения в конкретной записи, а также на добавление или удаление записей. - Если
value
- это ES6Set
, то будет возвращен новый наблюдаемый набор. - Если
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.