Перейти к содержанию

MobX.js

Для управления состоянием приложения используется библиотека MobX.js (https://mobx.js.org/))

MobX добавляет возможность наблюдать за существующими структурами данных, такими как объекты, массивы и экземпляры классов. Т.е. используется концепция observer/observable.

Базовые элементы библиотеки это @observable, @computed, @action.

Пример класса с observable свойством:

class Example { @observable public id: string; @computed public get name(): string { return this.id + '_example'; } }

При использовании React, можно сделать компоненты реактивными, добавив декоратор @observer из пакета mobx-react:

@observer class ExampleContent extends React.Component { render() { const { example } = this.props; return ( <div> {example.id} </div> ); } }

@observer говорит React-компоненту реагировать на изменение данных. MobX гарантирует, что компоненты будут перерисовываться, когда это необходимо, но так же не больше, чем нужно. Для правильного реагирования компонента-наблюдателя, ему нужно передавать не внутренние свойства наблюдаемых объектов, а весь объект целиком, т.к. в первом случае будет передано лишь значения, изменение которого ни на что не повлияет.

Подробнее о работе MobX.js в документации.

Back to top