refactor: enforce account page view model boundary
This commit is contained in:
+7
-3
@@ -13,8 +13,12 @@
|
||||
|
||||
## File roles
|
||||
|
||||
- `Component.tsx` - контейнер или публичный компонент.
|
||||
- `Component.vm.ts` - hook с данными и действиями.
|
||||
- `Component.view.tsx` - чистое представление.
|
||||
- `Component.tsx` - контейнер или публичный компонент; для data-driven pages вызывает page VM hook и выбирает top-level state view.
|
||||
- `Component.vm.ts` - hook с данными, действиями, state selection и derived presentation data.
|
||||
- `Component.view.tsx` - чистое представление: получает props, рендерит JSX и не вызывает data/auth/router/navigation/VM hooks.
|
||||
- `Component.types.ts` - props и локальные типы.
|
||||
- `Component.module.css` - локальные стили.
|
||||
|
||||
Большие view files дробить по ответственности. Если section/state можно
|
||||
самостоятельно назвать, вынести его в соседний presentation component вместо
|
||||
накопления смысловой нагрузки в одном файле.
|
||||
|
||||
+26
-1
@@ -6,4 +6,29 @@
|
||||
|
||||
Запросные экраны без успешных данных выбирают состояние в порядке loading, error, empty, loaded. Если query уже содержит данные, они остаются видимыми при фоновом refetch и его ошибке: рядом показываются неблокирующий progress и локальное предупреждение с retry. Такое состояние называется Client Cached Snapshot; оно не заменяет доменное server-side stale/fallback состояние.
|
||||
|
||||
Для finance-экранов container вызывает query hooks, VM выбирает состояние и передает только presentation props в Loading/Error/Empty/Loaded view. Known API errors, retry и stale snapshot остаются local views, а непойманные route errors обрабатывает общий route-keyed ErrorBoundary.
|
||||
Для finance-экранов используется граница `container -> ViewModel -> view`.
|
||||
`*.tsx` без суффикса — container: он вызывает единственный page VM hook и
|
||||
выбирает top-level Loading/Error/Empty/Loaded view. `*.vm.ts` владеет data
|
||||
fetching, auth/route inputs, state selection, retry callbacks, domain grouping
|
||||
и derived presentation data. `*.view.tsx` и соседние presentation components
|
||||
получают props и рендерят JSX.
|
||||
|
||||
View modules не вызывают data/auth/router/navigation/VM hooks: никаких
|
||||
`useBrokerage*`, `usePortfolio`, `useAuth`, `useParams`, `useNavigate` или
|
||||
page VM hooks внутри `*.view.tsx` и `components/*.view.tsx`. View modules также
|
||||
не группируют domain collections и не считают derived collection values вроде
|
||||
долей Portfolio Position. Эти значения готовит VM.
|
||||
|
||||
Допустимые hooks во view: `useTranslation()` для labels, form-context hooks в
|
||||
form views и локальный UI-only state для rendering fallback, например failed
|
||||
image state. Простое форматирование одного переданного значения через
|
||||
существующий formatter остаётся presentation concern; вычисления из всей
|
||||
коллекции остаются во VM.
|
||||
|
||||
View files дробятся по смысловой нагрузке, а не только по количеству строк. Если
|
||||
section или state имеет самостоятельный смысл и может быть назван, его нужно
|
||||
выносить в nearby presentation component вместо накопления внутри одного
|
||||
большого `*.view.tsx`.
|
||||
|
||||
Known API errors, retry и stale snapshot остаются local views, а непойманные
|
||||
route errors обрабатывает общий route-keyed ErrorBoundary.
|
||||
|
||||
Reference in New Issue
Block a user