Перейти к основному содержимому

Pages

Предупреждение

На данный момент ведутся активные обсуждения касаемо этого слоя:

  • является ли страница тем же слайсом
  • может ли быть иерархия страниц фрактальной, чтобы повторять структуру роутов
  • и т.д.

Поэтому здесь приведены общие сведения по этому слою

pages-themed-bordered

Описание#

  1. Здесь располагаются страницы приложения

    • соответствующие конкретному роуту
    • при необходимости - сгруппированные общей папкой / родительской страницей
  2. Каждая страница должна иметь максимально простую логику

    • вся логика отображения, бизнес правил и прочего - должна реализовываться путем композиции нижележащих слоев (shared, entitites, features)
    • при этом взаимодействие между нижележащими слоями - также должно осуществляться чаще всего на странице
      • Т.е. если featureA влияет на featureB на определенной странице - эта логика должна быть прописана в модели самой странице и только на ней!
      • Без кода в самих фичах и тем более, кросс-импортов!

Структура#

└── pages/{slice}          ├── index.ts          ├── lib.ts          ├── model.ts          └── ui.tsx

Примеры#

Страница оформления заказа#

Реализация БЛ заказа очень зависит от вашего проекта, где-то порой это может регулироваться и процессами. Поэтому здесь приведена лишь одна из имплементаций

pages/**/index.tsx
import { Order } from "features/order";import { ProductCard } from "entities/product";import { orderModel } from "entities/order";import { Layout } from "shared/ui/layout"
export const CartPage = () => {    const order = orderModel.useOrder();        // Очень условная разметка    return (        {/** Используем shared (Layout) */}        <Layout>            <Layout.Main>                ...                {/** Используем entities (order.items, ProductCard) */}                {order.items.map((item) => (                    <ProductCard key={item.id} data={item} />                ))}            </Layout.Main>            <Layout.Sidebar>                ...                {/** Используем features (Order.TotalInfo) */}                <Order.TotalInfo />            </Layout.Sidebar>        </Layout>    )}