Инверсия зависимостей в React-приложении
Вопрос
Как применить инверсию зависимостей в React-приложении? Зачем это нужно?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Компоненты зависят от интерфейса (API-клиент, аналитика, хранилище), а не от конкретной библиотеки
Реализацию передают через Context, пропсы или параметры фабрики
Тесты и Storybook получают заглушки без моков модулей
Можно заменить транспорт или SDK, не трогая компоненты
Не нужно заводить абстракцию на всё: только на изменчивые внешние детали
Что могут спросить следом
- Чем это лучше
vi.mockмодуля? - Где граница: React тоже надо абстрагировать?
Разбор
Инверсия зависимостей значит, что код верхнего уровня зависит от абстракций. На практике я описываю порт, например AnalyticsPort с методом track, или API-клиент с нужными методами, и передаю реализацию через Context-провайдер в корне приложения. Компоненты и хуки берут зависимость из контекста и не знают, Метрика там или заглушка. Плюсы: в тестах и Storybook подставляю фейк без перехвата импортов, можно сменить SDK или транспорт с REST на GraphQL, не трогая UI. Абстрагирую только изменчивые внешние детали: React, роутер или утилиты оборачивать незачем, это лишний слой.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.