Как нам создать реагирующее приложение с кратким и повторно используемым сервисным слоем? Он должен быть тестируемым, простым для понимания, допускающим простую или асинхронную загрузку и не требующим слишком большого количества шаблонного кода. Когда мы создаем наши сервисы, как мы используем их в наших компонентах с помощью хуков?
React useContext hook идеально подходит для этого варианта использования. Контекст React позволяет передавать данные дочерним компонентам без необходимости явно передавать их вниз по дереву в качестве реквизита для каждого компонента. Вместо внедрения мы можем запрашивать объекты контекста из компонентов или пользовательских хуков. Многие фреймворки React используют объекты контекста за кулисами.
Объект контекста — это самый простой бит. Мы можем создать его с помощью простого значения объекта. Для производственного проекта мы могли бы создать фабрику для этого и всех услуг.
В нашем app.js мы создаем наши службы и формируем наше приложение, включая созданный поставщик контекста. Имеет смысл создавать экземпляры служб в центральном расположении, поскольку они часто зависят друг от друга, от значений конфигурации, а иногда и от данных, которые необходимо извлекать асинхронно.
Наш маленький компонент, который использует контекст, следующий. Он ничего не делает, кроме как отображает текст, предоставленный сервисом. Мы используем специальный хук для связи между компонентом и сервисом. Я включил тест в нижней части файла. Тест показывает, насколько легко использовать этот шаблон для подключения сервисов к компонентам. Мы просто создаем фиктивный сервис, создаем простой объект контекста, и наш тест работает.
Спасибо за чтение, я надеюсь, что вы нашли это полезным. Если у вас есть какие-либо комментарии или дополнения, пожалуйста, оставьте сообщение ниже.
