Что находится в слое Shared в FSD

Ответ

Слой 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 — это не свалка! Сюда не кидают то, что относится только к одной конкретной фиче (типа «Карточка товара» или «Форма заказа»). Это место для по-настоящему общих, переиспользуемых вещей. Если начать сюда пихать бизнес-логику — всё, пиздец, архитектура поедет куда-то в пизду, и потом будешь три дня разгребать.