Настройка архитектуры MobX для React Native-приложения

Настройка архитектуры MobX для React Native-приложения

MobX — реактивный state manager, основанный на наблюдаемых значениях. Вместо диспатчинга экшнов и редьюсеров — прямые мутации наблюдаемых свойств, автоматически отслеживаемые React-компонентами. С mobx-react-lite и декораторами MobX 6 код становится компактным: минимум обёрток, максимум читаемости.

MobX Store на практике

import { makeAutoObservable, runInAction } from 'mobx';

class ProfileStore {
  profile: UserProfile | null = null;
  isLoading = false;
  error: string | null = null;

  constructor(private userRepository: UserRepository) {
    makeAutoObservable(this);
  }

  async loadProfile(userId: string) {
    this.isLoading = true;
    this.error = null;
    try {
      const profile = await this.userRepository.getProfile(userId);
      runInAction(() => {
        this.profile = profile;
        this.isLoading = false;
      });
    } catch (e) {
      runInAction(() => {
        this.error = (e as Error).message;
        this.isLoading = false;
      });
    }
  }

  get displayName() {
    return this.profile ? `${this.profile.firstName} ${this.profile.lastName}` : '';
  }
}

makeAutoObservable автоматически помечает поля как observable, методы как action, геттеры как computed. runInAction нужен для мутаций после await — без него MobX предупредит в strict mode.

В компоненте:

const ProfileScreen = observer(({ userId }: { userId: string }) => {
  const { profileStore } = useStores();
  useEffect(() => { profileStore.loadProfile(userId); }, [userId]);

  if (profileStore.isLoading) return <ActivityIndicator />;
  if (profileStore.error) return <ErrorView message={profileStore.error} />;
  return <ProfileView name={profileStore.displayName} />;
});

observer() из mobx-react-lite делает компонент реактивным: перерисовка только при изменении использованных observable-свойств.

Контекст для DI

Передаём stores через React Context без Provider-ада:

const StoreContext = createContext<RootStore | null>(null);
export const useStores = () => useContext(StoreContext)!;

// В App.tsx
const rootStore = new RootStore();
<StoreContext.Provider value={rootStore}>
  <AppNavigator />
</StoreContext.Provider>

RootStore создаёт все store-ы и передаёт зависимости между ними.

Главный аргумент за MobX

По сравнению с Redux — в два-три раза меньше кода для той же функциональности. Нет actionTypes, нет mapStateToProps, нет нормализации store. Для команд, которые ценят скорость разработки над строгостью — MobX выигрывает.

Аргумент против: меньше предсказуемости. Мутации происходят напрямую, без явного лога диспатчей. Для отладки подключаем mobx-react-devtools или mobx-logger.

Что настраиваем

RootStore с инжекцией зависимостей. StoreContext + useStores хук. Базовый Store-шаблон с makeAutoObservable. Настройка mobx + mobx-react-lite + Babel-плагин для декораторов (если нужен legacy-синтаксис). Тесты через Jest без React — чистые unit-тесты store-логики.

Сроки

Настройка MobX-архитектуры с нуля: 2–3 дня. Стоимость — после анализа требований.