Функция makeObservable делает класс отслеживаемым. Функция makeAutoObservable делает класс отслеживаемым по переданному контексту и самостоятельно производит нужные для неё настройки.
Любая созданная функция для MobX - это экшен, который меняет состояние. В отличие от Redux, состояние в данном менеджере можно мутировать. То есть, если мы изменим какое-либо значение, то MobX это заметит и запустит рендеринг компонента.
Сейчас нам нужно создать класс, который будет выполнять определённый функционал на странице (в виде методов). В конце нужно просто экспортировать один инстанс объекта класса.
State / store / counter.ts
Далее нам нужно импортировать наш классовый каунтер в компонент и вставить его функции.
Теперь, чтобы использовать каунтер с функциями, описанными в MobX, нужно обернуть весь компонент в функцию observer, которая отслеживает изменения состояний в компоненте и перерендеривает его.
State / State.tsx
И теперь наш счётчик работает и быстро отзывается на все действия
Далее приведём ещё один пример, где мы сразу добавим данные и реализуем список дел
Todo / store / todo.store.ts
Сейчас список дел реализуется почти так же, как и прошлый пример с каунтером.
В MobX очень важно, чтобы ключи элементов были уникальными, и чтобы они не являлись индексами массива
TodoList / TodoList.tsx
И теперь наш список дел удаляет себя и может быть выполненным
Так же нужно сказать, что если нам нужно работать с более глубокими уровнями вложенности, что в моб нужно передать опцию deep
Так же мы можем уточнить внутри оверрайда (второй объект моба):
что есть отслеживаемый объект todos: observable,
что есть экшены addTodo: action
И что является вычисляемым значением computed: значение
Вычисляемые значения - это значения, которые мы считаем в методе, помеченном ключевым словом get. Этот метод обязательно должен вычислять результат каких-то вычислений. Основное преимущество в том, что метод вызывается только тогда, когда один из его параметров изменил своё значение. Такой подход оптимизирует выполнение значений.
Теперь тут применяем функцию
Асинхронные экшены. Они используются ровно так же, как и остальные экшены.
Тут представлен пример получения списка дел с сервера jsonplaceholder