Введение в проверку объектов Yup в React

Валидатор схемы объектов JavaScript и анализатор объектов для использования с React

В этой статье мы рассмотрим, почему вы должны использовать Yup в своих проектах React, что именно он делает и как максимально эффективно использовать пакет для упрощения кода с примерами.

Да, разработан для использования в браузере. Если вас интересует проверка схемы объекта на стороне сервера с помощью NodeJS, взгляните на мою статью о Joi:

Joi for Node: Изучение проверки схемы объекта Javascript
Принятие проверки схемы объекта для ваших проектов NodeJS medium.com

Почему тебе нужно заботиться о Ага?

Ага, значительно упрощает нашу жизнь благодаря проверке данных, которые наши приложения потребляют и которыми манипулируют, абстрактным способом, который не мешает остальной части нашей бизнес-логики.

Веб-приложения, построенные на JavaScript Framework, теперь очень интерактивны и изменчивы сами по себе; это то, чего ожидал конечный пользователь. С этим связан большой объем обмена данными, будь то запросы API, отправка форм или пользовательские объекты для обработки нашего состояния.

Нам необходимо убедиться, что мы доставляем данные, с которыми, как ожидается, будут работать наши компоненты, в противном случае мы будем иметь дело с непредвиденными последствиями в виде сбоев при рендеринге компонентов или сбоев приложения - мы этого не хотим.

Общая суть Yup

Так как же именно Ага работает?

С помощью Yup мы создаем объект в формате Yup, который напоминает нашу предполагаемую схему для объекта, а затем используем служебные функции Yup, чтобы проверить, соответствуют ли наши объекты данных этой схеме, - следовательно, проверяя их.

Объект схемы

Давайте воспользуемся проверкой формы в качестве примера использования для нашего примера Yup.

Примечание. Проверка формы ни в коем случае не единственный вариант использования Yup - используйте ее для проверки любого объекта, который вам нужен, независимо от того, получаете ли вы данные из своих API или из внешней библиотеки API, или просто работать с несколькими объектами или массивами в вашем проекте, которые должны придерживаться определенной схемы.

С учетом сказанного, теперь представьте, что я создаю форму адреса оформления заказа, которая может напоминать следующую структуру:

{ 
    email_address: email <required>
    full_name: string, <required>
    house_no: int,
    address_1: string <required>,
    address_2: string,
    post_code: string <required>
    timestamp: date <required>
}

Это тип данных, которые я ожидаю от этой формы, или моей схемы для конкретного объекта. Если мой объект не соответствует этой схеме, он недействителен.

Обратите внимание, что я обработал поле email_address как тип данных электронной почты. Это не ошибка. Да, вы можете проверить, является ли значение адресом электронной почты, с помощью одного вызова метода. То же самое и с нашим значением timestamp - да, вы можете проверить, является ли это значение датой.

Как это выглядит как объект схемы Yup? Что-то вроде этого:

const checkoutAddressSchema = yup.object().shape({
  email_address: yup
      .string()
      .email()
      .required(),
  full_name: yup
      .string()
      .required(),
  house_no: yup
      .number()
      .required()
      .positive()
      .integer(),
  address_1: yup
      .string()
      .required(),
  address_2: yup
      .string(),
  post_code: yup
      .string()
      .required(),
  timestamp: yup
      .date()
      .default(() => (new Date()),
   }),
});

Схема Yup - это неизменяемый объект, отвечающий за проверку объекта.

Этот код не требует пояснений: мы можем сами убедиться в ответственности этого объекта в деталях, не добавляя ни единого комментария.

У каждого валидатора свой метод. Такая детализация позволяет нам, разработчикам, комбинировать столько валидаторов, сколько мы считаем подходящими для проверки наших данных.

Типы данных, такие как string, integer, boolean, array, object и date, являются вызываемыми валидаторами в Yup, что упрощает для новичков Yup начать использовать код.

Однако Yup выходит далеко за рамки простых типов данных. В приведенном выше примере мы также используем валидаторы, такие как email, required и positive, что позволяет мне проверить, является ли значение репрезентативным для адреса электронной почты, существует ли значение и является ли число положительным соответственно. (у нас также есть notRequired для большей читабельности вашей схемы).

Это отличный абстрактный дизайн многоразового использования. Мы даже можем назначить значения по умолчанию с помощью встроенной функции, как показано в приведенном выше примере с полем timestamp:

 ...
   timestamp: yup
      .date()
      .default(() => (new Date()),
   }
...

default() может быть что угодно: принимает любое значение. Функция может быть расширена и обработана как любая другая, чтобы включать любую логику, которую необходимо обработать, чтобы сгенерировать значение по умолчанию:

...
   timestamp: yup
      .date()
      .default(() => {
         //check for stuff           
         return new Date();
      }),
   }
...

Проверка объектов с помощью моей схемы

Теперь у нас есть схема для формы адреса оформления заказа, и мы можем использовать ее для проверки данных, которые мы получаем от нее. Допустим, я получаю следующие данные:

let addressFormData = {
   email_address: '[email protected]',
   full_name: 'Ross Bulat',
   house_no: null,
   address_1: 'My Street Name',
   post_code: 'AB01 0AB',
}

Как видите, поля address_2 и timestamp здесь отсутствуют - но они не требуются в нашей схеме, поэтому объект будет по-прежнему действителен.

Отсюда я хотел бы продемонстрировать 3 вещи:

Проверить, действителен ли мой объект. Таким образом, истинный или ложный результат того, действительно ли мой объект является действительным объектом адреса оформления заказа.
Подтвердите объект. Например. используйте мою схему для заполнения любых значений по умолчанию. Этот же тип приводит к нашему объекту.
Посетите cast() метод Yup, этот тип приводит объект без проверки.

Проверка действительности объекта

Для этого мы используем yup.isValid(), который в нашем примере будет выглядеть следующим образом:

const valid = await checkoutAddressSchema.isValid(addressFormData);

isValid() возвращает обещание, поэтому мы можем обработать это с помощью async и await, как показано выше, или использовать синтаксис обратного вызова:

checkoutAddressSchema
  .isValid(addressFormData)
  .then(function(valid) {
      
     //valid - true or false
  });

Я предпочитаю использовать await для более чистого синтаксиса.

Проверка объекта

В большинстве случаев нам потребуется фактическая проверка объекта: обработать его в соответствии с ожиданиями схемы. В нашем примере мы ожидаем значение временной метки, и у нас есть значение по умолчанию, если оно отсутствует.

Давайте проверим нашу адресную форму следующим образом:

await checkoutAddressSchema.validate(addressFormData);

Теперь наш объект будет пригоден для дальнейшей обработки.

Кастинг объекта

В приведенном выше примере validate() мы проверяем, действительны ли наши данные, и выполняем их проверку. Это удобный ярлык, которым вы можете пользоваться большую часть времени. Однако мы могли бы просто запустить объект с помощью cast() метода, который проверяет и исправляет его типы.

В нашей форме адреса оформления заказа у нас может быть строка, представляющая наш house_no, тогда как моя схема ожидает целое число. cast() исправит это. Он также преобразовал бы строку отметки времени в наш объект Date, если бы мы действительно предоставили строку отметки времени.

Cast называется так:

checkoutAddressSchema.cast(addressFormData);

Незаменимый инструмент?

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

Чтобы расширить ваше первоначальное понимание Ага, давайте рассмотрим некоторые другие полезные методы, доступные в пакете.

Разные полезные методы

Помните нашу структуру данных формы, описанную в верхней части статьи? Его можно получить из объекта Yup с помощью describe() method. describe() собирает детали схемы объекта и сериализует их в отдельный объект.
Хотите объединить 2 схемы в одну? Используйте метод concat(). Возможно, вы объединяете несколько объектов в одно тело вызова API и, следовательно, хотите проверить все тело с помощью одного объекта Yup. concat() пригодится для этого.
Досрочное прерывание проверки. По умолчанию Yup выполняет весь процесс проверки и собирает ошибки по мере выполнения и возвращает их все после завершения проверки. Возможно, мы не захотим этого делать. Мы можем использовать abortEarly, чтобы остановить выполнение проверки, как только возникнет первая ошибка. abortEarly передается как аргумент опции в validate():

await checkoutAddressSchema.validate(addressFormData, { abortEarly: false })

Да, есть отличные строковые утилиты, такие как trim(), которые удаляют пробелы вокруг строки. uppercase() и lowercase() доступны для принудительного использования заглавных букв.
Ага также имеет большое количество утилит, таких как min() и max(), а также round(), morethan(), lessthan() и truncate().
Да поддерживает регулярное выражение, что позволяет использовать регулярные выражения.

Установка Yup в проектах React

Давайте перейдем к тому, как установить Yup в свои проекты, и посетим некоторые ресурсы, доступные для дальнейшего чтения.

Посетите страницу NPMJS или проект Github для их официальной документации.

Установите yup с помощью npm, используя следующую команду:

npm i yup

Импорт Ага

Да, вы можете импортировать как целую библиотеку, так и отдельные компоненты, которые нужны только вашему компоненту.

Импортируйте всю библиотеку с помощью:

import * as yup from 'yup';

Я рекомендую импортировать всю библиотеку, когда вы начинаете разработку, избавляя вас от необходимости пересматривать свой импорт каждый раз, когда вы вводите новый объект Yup по мере развития ваших форм. Когда ваше приложение будет готово к сборке, еще раз посетите Yup, чтобы проверить, используете ли вы только ограниченное количество компонентов - возможно, вы используете только объекты required и string - в этом случае мы можем просто импортировать эти 2 вещи:

import { string, required } from 'yup';

В целом, однако, если вы используете более 5 компонентов, импорт такого количества объектов может стать неприятным запахом кода.

Куда пойти отсюда

Теперь вы должны иметь четкое представление о том, что такое да, для чего он используется, и, возможно, некоторые идеи о том, как это можно реализовать в ваших проектах!

Найдите время, чтобы изучить документацию, в которой перечислены все доступные валидаторы. Только после изучения всего, что может предложить пакет, вы получите полное представление о том, как он может принести пользу вашим приложениям.

Тем не менее, Yup можно легко построить, просто реорганизовав ваши валидаторы, поэтому нет ничего плохого в том, чтобы сразу перейти к какой-либо реализации, чтобы повысить осведомленность о рабочем процессе, прежде чем переходить к более подробным деталям документации.

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