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

Что такое МобХ?

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

Основные концепции MobX

1) Наблюдаемые

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

2) Действия

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

3) Реакции

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

4) Вычисленные значения

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

Давайте рассмотрим простой пример использования MobX для управления состоянием в приложении React Native.

Предположим, мы создаем приложение-счетчик:

Настройка MobX. Начните с установки необходимых пакетов.

npm install mobx mobx-react-lite

Создание наблюдаемого. Определите наблюдаемое для значения счетчика.

import { makeObservable, observable, action } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action,
    });
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();
export default counterStore;

Использование Observable в компонентах:Теперь вы можете использовать counterStore в своих компонентах для управления состоянием.

import React from 'react';
import { View, Text, Button } from 'react-native';
import { observer } from 'mobx-react-lite';
import counterStore from './counterStore';

const App = observer(() => {
  return (
    <View>
      <Text>Count: {counterStore.count}</Text>
      <Button title="Increment" onPress={counterStore.increment} />
      <Button title="Decrement" onPress={counterStore.decrement} />
    </View>
  );
});

export default App;

Заключение

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

Возможно, вам уже интересно, следили ли вы за моими предыдущими статьями, что лучше между React Context и MobX.

  • MobX: выбирайте MobX, если вам нужна автоматическая реактивность, детальный контроль над обновлениями и сложные потребности в управлении состоянием. Он подходит для более крупных приложений со сложными государственными структурами и опытными разработчиками.
  • Контекст React.Выберите React Context, если вы ищете более простой способ поделиться глобальным состоянием между компонентами без особых требований к реактивности. Это хороший выбор для небольших и средних приложений, а также для разработчиков, которым требуется более простое решение.

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

Вы можете найти полный код в этом репозитории GitHub.