react-redux-hook-form

Подключение

Чтобы подключить библиотеку, необходимо модифицировать ваш store:

1. Подключить formControllerReducer

import { formControllerReducer } from 'react-redux-hook-form';

const combinedReducer = combineReducers({
  formController: formControllerReducer, // подключение formControllerReducer
  user: userReducer,
  contact: contactReducer,
});

2. Записать функцию getState в window

window.getState = () => store.getState()

Документация

1. useForm && WrapperForm WrapperForm - обертка в которую должна быть обернута форма useForm - хук для инициализации формы

Пример:

export const Login:FC = memo( () => {
  const form = useForm({name: 'login'})

  return (
    <WrapperForm form={form} onSubmit={(data:ILogin) => {User.options.login(data)}}>
      <InputTitleStyled>Номер телефона</InputTitleStyled>
      <PhoneInput name={'username'} required/>

      <InputTitleStyled>Пароль</InputTitleStyled>
      <PasswordInput name={'password'} required/>

      <SubmitButton text={'Авторизироваться'}/>
    </WrapperForm>
  )
})

2. useField useField - используется для инициализации поля формы Из useField достаем следующие хуки useData, useIsValidate, useIsTouch, useMessageError Работают по принципу useState !Если хотите самостоятельно менять messageError isValidate isTouch рекомендуется отключить стандартное поведение useField. для этого необходимо передать в useField isDisableAuto: true

Пример:

interface IEmail {
  name: string;
  required?: boolean;
}

export const EmailInput: FC<IEmail> = (props) => {
  const {useData, useIsValidate, useIsTouch, useMessageError} = useField({
    name: props.name,
    isRequired: props.required,
    validateFunction: (value:string) => validate(value).string().max(30).email(),
  })

  const [data, changeData] = useData()
  const [isValidate, ] = useIsValidate()
  const [isTouch, ] = useIsTouch()
  const [messageError, ] = useMessageError()

  return (
    <>
      <EmailInputStyled
        type={"email"} value={data}
        onChange={(e:any)=> {changeData(e.target.value)}}
        isValidate={isValidate || !isTouch}
        id={props.name}
      />
      {!isValidate && isTouch &&
        <ErrorTitleStyled className={'error'}>
          {messageError}
        </ErrorTitleStyled>
      }
    </>
  )
};

3. Написание button Для написания кнопки необходимо из контекста взять formName и onSubmit Также необходим хук useIsValidateForm

Пример:

interface ISubmitButton {
  text: string;
  className?: string;
}

export const SubmitButton: FC<ISubmitButton> = (props) => {
  const formName = useContext(formNameContext)
  const isValidForm = useIsValidForm(formName)
  const onSubmit = useContext(onSubmitContext)

  const onClick = () => {
    if(isValidForm){
      onSubmitForm(formName, onSubmit)
    }
  }
  return (
    <SubmitButtonStyled className={props.className} isValidForm={isValidForm} onClick={onClick}>
      {props.text}
    </SubmitButtonStyled>
  )
};

4. useFieldSelector Бывают ситуации, когда значение формы необходимо использовать вне формы, для этого необходимо использовать useFieldSelector

Пример:

const search = useFieldSelector({formName: 'searchForm', fieldName: 'search'})

Преимущества

1. Направленность на инкапсуляцию логики внутри одного инпута.
2. Возможность дебажить формы через redux-devtools(расширения гугл хрома)
3. Возможность писать более лаконичные тесты для форм.

Мои рекомендации по написанию форм

1. Не имеет смысла делать универсальные inputs, куда лучше сделать несколько специализированных инпутов. Вместо того чтобы ограничиться одним инпутом textInput лучше сделать emailInput/passwordInput/phoneInput и тд. На бэке наверняка во всех emailField будет одинаковая валидация, так же как и на полях телефона и тд.

2. Нет ничего лучше, чем хранить данные на фронте в таком-же формате, как и на бэке. Когда дело касается текстового инпута, это очевидно, но когда дело касается действительно сложных кейсов, про это почему-то забывают Например: TimeInput дизайнер прислал дизайн в котором TimeInput состоит из 2 стринговых инпутов. Но на бэке, это одно стринговое поле. В таком случае имеет смысл использовать 1 useField и хранить в сторе данные как строку. Если вы напишите 2 инпута и будете где-то, вне компонента инпута, объединять их, то такой инпут невозможно станет масштабировать, так как подобное объединение прийдется повторять каждый раз, что значительно испортит код.

3. Форма должна быть максимально абстрактная. Если смысл вашей формы может понять пм, это хорошая форма. Пример хорошей формы:

    <WrapperForm form={form} onSubmit={(data:IRegistration) => {User.options.registration(data)}}>
      <InputTitleStyled>Номер телефона</InputTitleStyled>
      <PhoneInput name={'username'} required/>

      <InputTitleStyled>Емайл</InputTitleStyled>
      <EmailInput name={'email'} required/>

      <InputTitleStyled>Пароль</InputTitleStyled>
      <PasswordInput name={'password'} required/>

      <InputTitleStyled>Повторите пароль</InputTitleStyled>
      <PasswordInput name={'password2'} required/>

      <SubmitButton text={'Авторизироваться'}/>
    </WrapperForm>