S.Gromov
5874d3604c
- добавлен раздел примеров React в сайдбар - добавлены примеры создания и композиции фабрик - перенесены подробные React-примеры из раздела модулей - обновлены сгенерированные артефакты документации
115 lines
3.4 KiB
Markdown
115 lines
3.4 KiB
Markdown
---
|
||
title: Создание фабрики
|
||
description: Пример создания фабрики business-модуля в React-проекте
|
||
---
|
||
|
||
# Создание фабрики
|
||
|
||
Раздел показывает, как оформить фабрику business-модуля в React-проекте: описать публичный API, зависимости и функцию, возвращающую runtime API.
|
||
|
||
## Структура business-модуля
|
||
|
||
Фабрика лежит в корне business-модуля. Типы публичного API и зависимостей размещаются в `types/`.
|
||
|
||
```text
|
||
business/customer/
|
||
├── customer.factory.ts
|
||
├── hooks/
|
||
├── types/
|
||
│ ├── customer.type.ts
|
||
│ ├── customer-api.type.ts
|
||
│ └── customer-factory.type.ts
|
||
├── ui/
|
||
└── index.ts
|
||
```
|
||
|
||
## Тип публичного API
|
||
|
||
Публичный API описывает runtime-возможности, которые модуль отдаёт потребителям: хуки, компоненты и сценарные методы.
|
||
|
||
```ts
|
||
// business/customer/types/customer-api.type.ts
|
||
import type { ReactNode } from 'react'
|
||
import type { Customer } from './customer.type'
|
||
|
||
export type CustomerCardProps = {
|
||
customer: Customer
|
||
}
|
||
|
||
export type CustomerApi = {
|
||
useCustomer: () => Customer | null
|
||
CustomerCard: (props: CustomerCardProps) => ReactNode
|
||
}
|
||
```
|
||
|
||
```ts
|
||
// business/customer/types/customer-factory.type.ts
|
||
import type { CustomerApi } from './customer-api.type'
|
||
|
||
export type CustomerFactory = () => CustomerApi
|
||
```
|
||
|
||
## Фабрика без зависимостей
|
||
|
||
Если модулю не нужны другие домены в runtime, фабрика создаётся без аргументов.
|
||
|
||
```ts
|
||
// business/customer/customer.factory.ts
|
||
import { useCustomer } from './hooks/use-customer.hook'
|
||
import { CustomerCard } from './ui/customer-card'
|
||
import type { CustomerFactory } from './types/customer-factory.type'
|
||
|
||
export const customerFactory: CustomerFactory = () => {
|
||
return {
|
||
useCustomer,
|
||
CustomerCard,
|
||
}
|
||
}
|
||
```
|
||
|
||
```ts
|
||
// business/customer/index.ts
|
||
export { customerFactory } from './customer.factory'
|
||
|
||
export type { Customer } from './types/customer.type'
|
||
export type { CustomerApi } from './types/customer-api.type'
|
||
export type { CustomerFactory } from './types/customer-factory.type'
|
||
```
|
||
|
||
## Фабрика с зависимостями
|
||
|
||
Если модулю нужен другой домен в runtime, зависимость передаётся аргументом фабрики. Тип зависимости описывает только нужную часть API.
|
||
|
||
```ts
|
||
// business/order/types/order-deps.type.ts
|
||
import type { CustomerApi } from '@/business/customer'
|
||
|
||
export type OrderDeps = {
|
||
customer: Pick<CustomerApi, 'useCustomer'>
|
||
}
|
||
```
|
||
|
||
```ts
|
||
// business/order/types/order-factory.type.ts
|
||
import type { OrderApi } from './order-api.type'
|
||
import type { OrderDeps } from './order-deps.type'
|
||
|
||
export type OrderFactory = (deps: OrderDeps) => OrderApi
|
||
```
|
||
|
||
```ts
|
||
// business/order/order.factory.ts
|
||
import { createUseOrder } from './hooks/use-order.hook'
|
||
import { OrderCard } from './ui/order-card'
|
||
import type { OrderFactory } from './types/order-factory.type'
|
||
|
||
export const orderFactory: OrderFactory = (deps) => {
|
||
const useOrder = createUseOrder(deps)
|
||
|
||
return {
|
||
useOrder,
|
||
OrderCard,
|
||
}
|
||
}
|
||
```
|