react-create-view предоставляет утилиту для стандартизации создания представлений, которые проходят через разные состояния: loading, success, empty, error.
View — это просто общий термин для пользовательского интерфейса, который отображает некоторые вещи.
Мы привыкли создавать представление, которое выполняет вызов API и может отображать что-то другое в зависимости от того, загружается ли вызов API, успешно, выдает ошибки или предоставляет пустой список.
Как и многие из вас, я работаю в команде, и каждый член команды справляется с этим вариантом использования по-своему. Цель здесь состоит в том, чтобы стандартизировать то, как команда строит такого рода представления.
Утилита createView помогает изменить код примерно так:
к чему-то вроде этого:
Вы должны использовать некоторое воображение, но вы можете сказать, какой пример кода легче понять. Я имею в виду, что оба примера технически работают в конце концов. Они отображают другой вид в зависимости от текущего состояния (success, loading, empty, error). Однако первый пример требует немного больше умственного джиу-джитсу, поскольку есть комбинация if условий и тернарного оператора для определения того, какой пользовательский интерфейс отображать.
Однако утилита createView четко разбивает эти условия пользовательского интерфейса на окончательные компоненты.
По сути, вы предоставляете некоторые общие типы TS для createView , которые представляют SuccessModel, FailureModel, LoadingModel, or EmptyModel, и пишете код компонента для каждого состояния представления, где свойства соответствуют предоставленной модели.
Как мы предоставляем модели для представления? Ответ hook.
Используйте предоставленный тип ViewModelProps для создания своего хука. Тип ViewModelProps представляет собой объединение TS с перечислением status и model для каждого возможного status. Когда status равен success, визуализируется компонент Success в createView и так далее.
Когда у вас есть свой пользовательский тип ViewModelProps, установите его в качестве возвращаемого значения хука.
После этого объедините хук и представление, возвращаемое утилитой createView и альтом
Это также помогает разработчикам отделить представление/пользовательский интерфейс от бизнес-логики.
Представление можно легко протестировать в чем-то вроде Storybook и использовать фиктивные данные, в то время как хук может отвечать за реальную бизнес-логику.
Включите в свой хук что-то вроде react-query для обработки состояний вызовов API, и все готово.
Последнее, что нужно отметить, это создавать свои модели на основе того, что требует пользовательский интерфейс, а не того, что предоставляет API! Клиент должен владеть своими моделями, а не API. Таким образом, когда выходит API v2, вы меняете не логику на уровне представления, а на уровне бизнес-логики или хуке.
Очень вдохновлен https://redwoodjs.com/docs/cells
Репо: https://github.com/ChrisLFieldsII/react-create-view
Спасибо за прочтение. Надеюсь, это поможет, если вы попробуете это. Все отзывы приветствуются. Мир ✌🏾
