Налаштування архітектури 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 режимі.

У компоненті:

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 дні. Вартість — після аналізу вимог.