Пример связки React + MobX

Данное приложение - пример того как можно реализовать модель данных и слой бизнес-логики отдельно от UI (насколько это возможно).

В качестве примера приведена простая форма регистрации с псевдо-вызовом API и псевдо-нотификацией.

Мотивация

Целью данного примера является демонстрация возможностей различных реализаций стора в связке с React, формирования слоев (Бизнес Логика <---> UI), различных небольших конструкций вроде reactionsExtender, позволяющих сильно упростить жизнь разработчика.

ВАЖНО ПОМНИТЬ! Это не универсальный гайд, и в более сложном проекте могут потребоваться дополнительные/иные структуры данных и абстракций для решения тех или иных задач.

Перед началом

Установите зависимости

npm i

Запустите сервер next.js

npm run dev
# or
yarn dev
# or
pnpm dev

Откройте http://localhost:3000.

В данном примере для удобства используется фреймворк Next.js, так что если заходите расширить возможности данного демо - обратитесь к документации

Важно знать

В данном примере некоторые механизмы (например, формы и их создание) сильно упрощены, чтобы основной акцент оставался на особенностях имплементации MobX - состояний, изменений, реакций и т.д.