В первой части серии От Ember к React я представил шаблон для повторного использования данных, полученных в компоненте верхнего уровня, в его дочерних элементах. Затем я начал понимать, что могу использовать этот паттерн, чтобы перенести еще больше идей из Ember в React! Вот пара, которую я использовал в последнее время:
Индикатор загрузки
Иногда мы хотим показать Индикатор загрузки, чтобы пользователи знали, когда обрабатывается запрос. Как предложено в этом посте, логика и разметка должны быть размещены в компоненте верхнего уровня для повторного использования последующими компонентами.
Как и раньше, я вспомнил удобную функцию Ember под названием Loading/Error Substates, уже встроенную в сам фреймворк. Оказывается, наш предыдущий шаблон Компонент и оболочка высокого порядка — идеальное место для повторения этого шаблона, поскольку нам не нужно повторять загрузчик в каждом отдельном компоненте:
Таким образом, мы можем повторно использовать логику загрузчика в дочерних компонентах на случай, если нам понадобится обратиться к другому удаленному API:
Обработка ошибок
Мы можем применить аналогичный шаблон для обработки ошибок, в этом случае я бы использовал общий модальный режим, чтобы показать потенциальные ошибки сети:
И вы можете использовать его в дочерних компонентах аналогичным образом, используя блок Try..Catch:
*Update: я также считаю хорошей идеей разместить здесь логику Границы ошибок
Ничто не идеально…
Недостатком (без каламбура) этого шаблона является то, что нам нужно передавать реквизиты действий (showLoader и showErrorModal) каждому дочернему компоненту, и если наше дерево компонентов достаточно глубокое, это будет утомительной и подверженной ошибкам задачей, не говоря уже о супер многословном!
Решение этой проблемы в Ember заключалось в использовании надстройки под названием ember-route-action-helper, которая используется для всплывания действий к родительскому маршруту. Это возможно из-за экзистенциальной разницы между роутами и компонентами в объектной модели Ember, но, поскольку React состоит только из компонентов, мы не можем легко воспроизвести эту функцию… или можем? 🤔
Когда контекстный API?
Большинство этих подводных камней потенциально можно устранить с помощью React Context API, но опять же, я оставлю это на другой день 😬
