Ответ
Слой Shared в FSD (Feature-Sliced Design) содержит переиспользуемые компоненты, утилиты, хуки и типы, которые не привязаны к конкретной фиче. Это глобальные элементы, используемые во всем приложении.
Примеры содержимого:
- UI-кит (кнопки, инпуты, модалки)
- Хуки (useDebounce, useLocalStorage)
- Утилиты (formatDate, apiClient)
- Константы (роуты, настройки темы)
- Типы/интерфейсы (User, ApiResponse)
// Пример структуры
shared/
ui/
Button/
Button.tsx
Button.module.css
lib/
hooks/
useDebounce.ts
utils/
formatDate.ts
types/
user.ts
Важно: Shared не должен содержать бизнес-логику или специфичные для фич элементы.
Ответ 18+ 🔞
А, слушай, вот эта ваша модная штука — FSD. Ну, Feature-Sliced Design, если по-пацански. Так вот, там есть слой Shared, и это, блядь, самое важное место, где хранится всякая универсальная хуйня, которую ты таскаешь по всему приложению, как чемодан без ручки.
Представь себе: это как общий ящик с инструментами в гараже. Туда кидаешь то, что нужно всем, но что само по себе — не машина. Никакой бизнес-логики там быть не должно, а то получится пиздец и бардак.
Что там валяется, в этом Shared?
- UI-кит: Твои кнопки, инпуты, модалки — всё, чем ты будешь строить интерфейсы. Один раз сделал красивую кнопку — и тыкаешь её куда хочешь, хоть в форму логина, хоть в корзину.
- Хуки: Ну, типа
useDebounce(чтобы не дёргать API на каждое нажатие клавиши) илиuseLocalStorage(чтобы не изобретать велосипед каждый раз, когда надо что-то в браузере сохранить). - Утилиты: Функции-помогалки.
formatDate— чтобы даты нормально показывать,apiClient— обёртка над fetch/axios, чтобы не повторять один и тот же код для каждого запроса. - Константы: Роуты приложения, настройки темы — всё, что не меняется и нужно в десяти местах сразу.
- Типы/интерфейсы: Вот, допустим, у тебя есть тип
User. Он и в профиле нужен, и в комментариях, и в админке. Так вот, его место — здесь, вshared/types. Чтобы везде импортировать один и тот же интерфейс, а не описывать его в каждом слое заново, как последний распиздяй.
Вот как это выглядит в папках, примерно:
shared/
ui/ <-- Здесь живут компоненты-кирпичики
Button/
Button.tsx
Button.module.css
lib/ <-- А тут — вся логика помощников
hooks/
useDebounce.ts <-- Хук, который тормозит вызов функции
utils/
formatDate.ts <-- Утилита, превращающая дату в читаемый текст
types/ <-- Склад общих типов
user.ts <-- Тот самый тип User, который везде нужен
Запомни главное, ёпта: Shared — это не свалка! Сюда не кидают то, что относится только к одной конкретной фиче (типа «Карточка товара» или «Форма заказа»). Это место для по-настоящему общих, переиспользуемых вещей. Если начать сюда пихать бизнес-логику — всё, пиздец, архитектура поедет куда-то в пизду, и потом будешь три дня разгребать.