MobX

MobX

Функция makeObservable делает класс отслеживаемым. Функция makeAutoObservable делает класс отслеживаемым по переданному контексту и самостоятельно производит нужные для неё настройки.

Любая созданная функция для MobX - это экшен, который меняет состояние. В отличие от Redux, состояние в данном менеджере можно мутировать. То есть, если мы изменим какое-либо значение, то MobX это заметит и запустит рендеринг компонента.

Сейчас нам нужно создать класс, который будет выполнять определённый функционал на странице (в виде методов). В конце нужно просто экспортировать один инстанс объекта класса.

State / store / counter.ts

import { makeAutoObservable } from 'mobx';
 
class Counter {
   // переменная, которая является состоянием
   count = 0;
 
   constructor() {
      // настраивает работу с mobx
      makeAutoObservable(this);
   }
 
   increment() {
      this.count = this.count + 1;
   }
 
   decrement() {
      this.count = this.count - 1;
   }
}
 
export default new Counter();

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

State / State.tsx

import React from 'react';
import { useState } from 'react';
import styles from './State.module.scss';
import { Button } from '@/components';
import counter from './store/counter';
import { observer } from 'mobx-react-lite';
 
export const State = observer((): JSX.Element => {
   return (
      <div className={styles.wrapper}>
         <h2 className={styles.title}>Счётчик:</h2>
         <h1 className={styles.num}>{counter.count}</h1>
         <Button
            buttonType={'gray'}
            className={styles.reduce}
            onClick={() => counter.decrement()}
         >
            Уменьшить
         </Button>
         <Button
            buttonType={'purple'}
            className={styles.increase}
            onClick={() => counter.increment()}
         >
            Увеличить
         </Button>
      </div>
   );
});

И теперь наш счётчик работает и быстро отзывается на все действия

Далее приведём ещё один пример, где мы сразу добавим данные и реализуем список дел

Todo / store / todo.store.ts

import { makeAutoObservable } from 'mobx';
 
interface ITodo {
   id: number;
   title: string;
   completed: boolean;
}
 
class TodoStore {
   todos: ITodo[] = [
      { id: 1, title: 'Сходить в магазин', completed: false },
      { id: 2, title: 'Купить хлеб', completed: false },
      { id: 3, title: 'Съесть хлеб', completed: false },
   ];
 
   constructor() {
      makeAutoObservable(this);
   }
 
   addTodo(todo: ITodo) {
      this.todos.push(todo);
   }
 
   removeTodo(id: number) {
      this.todos = this.todos.filter(todo => todo.id !== id);
   }
 
   completeTodo(id: number) {
      this.todos = this.todos.map(todo =>
         todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      );
   }
}
 
export default new TodoStore();

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

TodoList / TodoList.tsx

import React from 'react';
import { observer } from 'mobx-react-lite';
import todo from './store/todo.store';
import styles from './TodoList.module.scss';
import { Button, Input } from '@/components';
 
export const TodoList = observer(() => {
   return (
      <div className={styles.wrapper}>
         {todo.todos.map(t => (
            <div key={t.id} className={styles.todo}>
               <Input
                  type={'checkbox'}
                  checked={t.completed}
                  onChange={() => todo.completeTodo(t.id)}
               />
               <div>{t.title}</div>
               <Button
                  className={styles.button}
                  buttonType={'purple'}
                  onClick={() => todo.removeTodo(t.id)}
               >
                  X
               </Button>
            </div>
         ))}
      </div>
   );
});

И теперь наш список дел удаляет себя и может быть выполненным

Так же нужно сказать, что если нам нужно работать с более глубокими уровнями вложенности, что в моб нужно передать опцию deep

Так же мы можем уточнить внутри оверрайда (второй объект моба):

• что есть отслеживаемый объект todos: observable,
• что есть экшены addTodo: action
• И что является вычисляемым значением computed: значение

constructor() {
   makeAutoObservable(this, { todos: observable, addTodo: action, computed:  });
}

Вычисляемые значения - это значения, которые мы считаем в методе, помеченном ключевым словом get. Этот метод обязательно должен вычислять результат каких-то вычислений. Основное преимущество в том, что метод вызывается только тогда, когда один из его параметров изменил своё значение. Такой подход оптимизирует выполнение значений.

get total() {
   return `Counter = ${this.timer + this.count}`;
}

Теперь тут применяем функцию

<h1 className={styles.num}>{counter.total}</h1>

Асинхронные экшены. Они используются ровно так же, как и остальные экшены. Тут представлен пример получения списка дел с сервера jsonplaceholder

todo.store.ts

fetchTodos() {
   fetch('https://jsonplaceholder.typicode.com/todos/')
      .then(response => response.json())
      .then(json => {
         this.todos = [...this.todos, ...json];
      });
}

Тут при нажатии кнопки мы получаем данный массив

TodoList.tsx

<Button buttonType={'gray'} onClick={() => todo.fetchTodos()}>
   Получить список дел
</Button>

И видим огромный список дел