Внедрение зависимостей в React упрощено.

Наши приложения React состоят из нескольких компонентов / модулей. Иногда эти компоненты могут захотеть взаимодействовать друг с другом, чтобы получить полную функциональность. До тех пор, пока наше приложение не станет маленьким и не станет достаточно большим, мы, возможно, не сможем понять важность правильного управления этими зависимостями между компонентами.

В этой статье мы обсудим:

• Когда нам нужно применить шаблон внедрения зависимостей
• Достижение внедрения зависимостей с использованием компонентов более высокого порядка (HOC).
• Внедрение зависимостей с использованием контекста React.

Давайте разберемся со следующим примером

Здесь компонент App инициализирует службу Api и передает ссылку дочернему C1 в качестве опоры.

Здесь компонент C1 получает опору от компонента App и передает ее C2. Посмотрите, C1 ничего не делает с опорами. Нам нужно только убедиться, что наш экземпляр ApiService каким-то образом достигает компонента C2 в нашем дереве, где он используется. Поскольку это приложение очень простого приложения. Следовательно, трехуровневая вложенность. Но когда у нас есть большое приложение, использующее описанный выше способ, нам нужно продолжать передавать опору вниз по дереву, пока она не достигнет последнего дочернего компонента, где его нужно использовать, что определенно не очень хорошо. Это называется «Бурение опоры».

Вышеупомянутый шаблон делает наш код менее тестируемым, потому что, если предположить, что нам нужно написать тесты для компонентов X2 и X3, мы должны имитировать someProps несмотря на то, что он не используется для этих двух компонентов.

Решение вышеуказанной проблемы с помощью внедрения зависимостей с использованием компонента более высокого порядка:

Создайте файл dependency.js.

Объект dependencies будет хранить значения всех наших зависимостей. Функция registerDeps просто регистрирует эти зависимости в объекте. Функция get просто выбирает зависимость для данного индекса.

Теперь давайте создадим HOC, который возвращает модифицированный компонент с введенными свойствами.

В нашей функции WrapperComponent мы передаем Component as WrappedComponent, массив dependencies as deps и объект mapper, и он возвращает новый компонент Injected с зависимостями в качестве свойств. Ищем зависимости и отображаем их в ComponenWillMount.

Мы внесем следующие изменения в наш App компонент

Мы инициализировали нашу службу Api и зарегистрировали ее с помощью функции registerDeps. Теперь в нашем C2 компоненте мы вносим следующие изменения, чтобы обернуть его с помощью HOC.

Вот и все. Теперь нам не нужно беспокоиться о бурении опор. Какой бы компонент ни использовал зависимости, он может напрямую использовать его, используя шаблон HOC.

Решение вышеуказанной проблемы с помощью внедрения зависимостей с использованием контекста:

Давайте создадим файл с именем configureContext.js

Теперь в нашем App компоненте вместо использования функции registerDeps мы можем использовать поставщик контекста.

И теперь в нашем C2 компоненте вместо того, чтобы заключать его в HOC, мы просто используем потребителя контекста.

Вот и все. Вот как сделать внедрение зависимостей с помощью контекста реакции.

Надеюсь, вам понравилась эта статья. Пожалуйста, не забывай хлопать и следовать за мной :)