Вы устали бороться со сложным управлением состоянием в своих приложениях React? Не смотрите дальше! В этой статье блога мы углубимся в MobX, мощную библиотеку управления состоянием, которая упрощает процесс управления и обновления состояния в ваших компонентах React. Мы изучим основы MobX и предоставим вам множество практических примеров, иллюстрирующих его использование.

Для начала создадим простой класс, использующий MobX для управления состоянием:

import { observable, action, computed } from 'mobx';
class ExampleClass {
  @observable count = 0;
  @action increment() {
    this.count++;
  }
  @action decrement() {
    this.count--;
  }
  @computed get doubledCount() {
    return this.count * 2;
  }
}

В приведенном выше примере мы определяем ExampleClass, который представляет счетчик. Вот разбивка используемых методов:

1. @observable: этот декоратор используется для пометки свойства countкак наблюдаемого, указывая, что его можно отслеживать и автоматически обновлять при изменении его значения..

2. @action: методы incrementи decrementдекорируются цифрой @action, что означает, что они изменить состояние класса. Когда эти методы вызываются, MobX отслеживает изменения и обновляет все компоненты, которые зависят от измененного состояния.

3. @computed: метод doubledCount — это вычисляемое свойство, зависящее от свойства count. Он вычисляет и возвращает значение на основе текущего состояния класса. Вычисляемые свойства автоматически обновляются при изменении их зависимостей.

Теперь, когда у нас настроен пример класса, давайте продемонстрируем, как использовать его в компоненте React:

import { observer } from 'mobx-react';
import React from 'react';
const CounterComponent = observer(({ example }) => {
  return (
    <div>
      <h2>Count: {example.count}</h2>
      <button onClick={example.increment}>Increment</button>
      <button onClick={example.decrement}>Decrement</button>
      <h2>Doubled Count: {example.doubledCount}</h2>
    </div>
  );
});
export default CounterComponent;

В приведенном выше фрагменте кода мы импортируем функцию observerиз mobx-react, чтобы создать компонент-наблюдатель. Функция observerоборачивает наш компонент, позволяя ему автоматически реагировать на изменения в экземпляре ExampleClass, переданном как свойство.

Используя свойство example, мы можем получить доступ к count, increment, decrementи doubledCountметодов из нашего класса MobX. При каждом изменении свойства countкомпонент будет повторно отображаться, отражая обновленное состояние.

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

Подводя итог, MobX упрощает управление состоянием, используя наблюдаемые свойства, действия и вычисляемые значения. Используя MobX в сочетании с React, вы можете создавать масштабируемые и удобные в обслуживании приложения без необходимости обновления состояния вручную.

Итак, чего же вы ждете? Попробуйте MobX и повысьте уровень своей игры в управление государством!