Миграция на DSA

Не нужно переписывать приложение за один проход. Лучше переносить границы последовательно.

1. Зафиксируйте слои

app → pages → components → data → shared

2. Найдите владельцев данных

Соберите код постов вокруг data/posts, комментариев вокруг data/comments.

Не начинайте с перемещения всех helpers.

3. Закройте внешние границы

Там, где приложение читает неизвестные внешние данные, добавьте Valibot schema и unknown → parse.

4. Отделите DTO от модели приложения

Если UI использует naming внешнего контракта, добавьте mapper и внутренний тип.

5. Соберите состояние в MobX stores

Переносите именно долгоживущее и сценарное состояние. Не переносите поля React Hook Form в MobX без причины.

6. Разделите smart и dumb UI

Компонент, который читает store, можно оставить smart. Чистое отображение вынесите в props-компонент, если это улучшает повторное использование и тестируемость.

7. Введите public API

Заменяйте deep imports:

@/data/posts/posts.store

на:

@/data/posts

8. Перенесите route-знание к pages

useParams и useNavigate должны оставаться в React-слое. MobX stores получают обычные значения.

9. Разберите формы

React Hook Form владеет полями формы, Valibot — их проверкой, MobX — отдельным состоянием сценария.

10. Упрощайте после переноса

После миграции удалите пустые абстракции и временные прокси. Цель DSA — понятные границы, а не максимальное количество файлов.