0

Проблема такая, я не знаю как правильно показывать ошибки формы в final form. Я научился показывать ошибки валидации отдельных филдов, но не знаю как поступить с ошибкой всей формы. Вот ситуация: Идёт процесс логинизации пользователя. Он(пользователь) сабмитит форму, идёт запрос на сервер, приходит ответ с ошибкой о том что неправильный логин или пароль. Как мне взять эту ошибку с редьюсера(где находится thunk) и дать знать об этой ошибке странице Login и показать эту ошибку.

Я бы мог сделать это "как нибудь", но мне интересно как сделать это правильно(грамотно).

Вот страница Login

import React from 'react';
import { Form, Field } from 'react-final-form';
import styles from './Login.module.css';
import { required, composeValidators, maxLength, minLength } from '../../utils/validators/validators'
import { CheckBox, FormControl } from '../Common/FormControls/FormControls';
import { login } from '../../redux/auth-reducer';
import { connect } from 'react-redux';
import { Navigate } from 'react-router-dom';

const Login = (props) => {

  let Input = FormControl('input');

  const onSubmit = ({ email, password, checkBox, ...rest }) => {
    props.login(email, password, checkBox)
  }

  if (props.isAuth) {
    return <Navigate to='/profile' />
  }

  return <Form
    onSubmit={onSubmit}
    render={({ handleSubmit, form, submitting, pristine, values, submitError }) => (
      <form onSubmit={handleSubmit} className={styles.loginPage}>
        <div className={styles.loginBlock}>
          <h1>Login</h1>
          <Field component={Input} placeholder='Email' name='email' validate={composeValidators(required, maxLength(256))} />

          <Field component={Input} placeholder='Password' name='password' type='password' validate={composeValidators(required, minLength(8))} />

          <Field component={CheckBox} name='checkBox' type='checkbox' />

          <button type='submit' disabled={submitting}>Login</button>
        </div>
      </form >
    )}
  />
}

let mapStateToProps = (state) => ({ isAuth: state.auth.isAuth })

export default connect(mapStateToProps, { login })(Login);

Вот reducer

import { authAPI } from '../api/api';

const SET_AUTH_USER_DATA = 'SET-AUTH-USER-DATA';
const TOGGLE_FETCHING = 'TOGGLE-FETCHING';

let initialState = {
  userId: null,
  login: null,
  email: null,
  isFetching: false,
  isAuth: false
}

const authReducer = (state = initialState, action) => {

  switch (action.type) {
    case SET_AUTH_USER_DATA:
      return {
        ...state,
        ...action.data
      }

    default: return state;
  }
}

export const setAuthUserData = (userId, login, email, isAuth) => ({ type: SET_AUTH_USER_DATA, data: { userId, login, email, isAuth } })
export const toggleFetching = (isFetching) => ({ type: TOGGLE_FETCHING, isFetching })

export let authMe = () => (dispatch) => {
  dispatch(toggleFetching(true))
  authAPI.getAuth().then(data => {
    const { id, login, email } = data.data;
    if (data.resultCode === 0) {
      dispatch(setAuthUserData(id, login, email, true))
    }
    dispatch(toggleFetching(false))
  })
}

export let login = (email, password, rememberMe) => (dispatch) => {
  authAPI.login(email, password, rememberMe).then(data => {
    if (data.resultCode === 0) {
      dispatch(authMe())
    }
  })
}

export let logout = () => (dispatch) => {
  authAPI.logout().then(data => {
    if (data.resultCode === 0) {
      dispatch(setAuthUserData(null, null, null, false))
    }
  })
}

export default authReducer;

1 ответ 1

0

Не знаю насколько правильно я смог решить проблему, но я её решил.

Вот Страница Login

import React from 'react';
import { Form, Field } from 'react-final-form';
import styles from './Login.module.css';
import { required, composeValidators, maxLength, minLength } from '../../utils/validators/validators'
import { CheckBox, FormControl } from '../Common/FormControls/FormControls';
import { login } from '../../redux/auth-reducer';
import { connect } from 'react-redux';
import { Navigate } from 'react-router-dom';

const Login = (props) => {

  let Input = FormControl('input');

  if (props.isAuth) {
    return <Navigate to='/profile' />
  }

  let onSubmit = ({ email, password, checkBox, ...rest }) => {
    return props.login(email, password, checkBox)
  }

  return <Form
    onSubmit={onSubmit}
    render={({ handleSubmit, form, submitting, pristine, values, submitError }) => (
      <form onSubmit={handleSubmit} className={styles.loginPage}>
        <div className={styles.loginBlock}>
          <h1>Login</h1>
          <Field component={Input} placeholder='Email' name='email' validate={composeValidators(required, maxLength(256))} />

          <Field component={Input} placeholder='Password' name='password' validate={composeValidators(required, minLength(8))} />

          <Field component={CheckBox} name='checkBox' type='checkbox' />

          {submitError && <div className="error">{submitError}</div>}

          <button type='submit' disabled={submitting}>Login</button>
        </div>
      </form >
    )}
  />
}

let mapStateToProps = (state) => ({ isAuth: state.auth.isAuth })

export default connect(mapStateToProps, { login })(Login);

Вот reducer

import { authAPI } from '../api/api';
import { FORM_ERROR } from 'final-form';

const SET_AUTH_USER_DATA = 'SET-AUTH-USER-DATA';
const TOGGLE_FETCHING = 'TOGGLE-FETCHING';

let initialState = {
  userId: null,
  login: null,
  email: null,
  isFetching: false,
  isAuth: false
}

const authReducer = (state = initialState, action) => {

  switch (action.type) {
    case SET_AUTH_USER_DATA:
      return {
        ...state,
        ...action.data
      }

    default: return state;
  }
}

export const setAuthUserData = (userId, login, email, isAuth) => ({ type: SET_AUTH_USER_DATA, data: { userId, login, email, isAuth } })
export const toggleFetching = (isFetching) => ({ type: TOGGLE_FETCHING, isFetching })

export let authMe = () => (dispatch) => {
  return authAPI.getAuth().then(data => {
    const { id, login, email } = data.data;
    if (data.resultCode === 0) {
      dispatch(setAuthUserData(id, login, email, true))
    }
  })
}

export let login = (email, password, rememberMe) => (dispatch) => {
  return authAPI.login(email, password, rememberMe).then(data => {
    if (data.resultCode === 0) {
      dispatch(authMe())
    } else {
      return { [FORM_ERROR]: data.messages[0] }
    }
  })
}

export let logout = () => (dispatch) => {
  authAPI.logout().then(data => {
    if (data.resultCode === 0) {
      dispatch(setAuthUserData(null, null, null, false))
    }
  })
}

export default authReducer;

Сейчас попытаюсь объяснить.

Вот здесь, где идёт запрос на сервак, мы условием проверяем ответ с сервера.

export let login = (email, password, rememberMe) => (dispatch) => {
  return authAPI.login(email, password, rememberMe).then(data => {
    if (data.resultCode === 0) {
      dispatch(authMe())
    } else {
      return { [FORM_ERROR]: data.messages[0] }
    }
  })
}

Если ошибки нет, то сетаем ответ в state. Иначе возвращаем объект как написано в коде выше В данном случае, FORM_ERROR - это ошибка всей формы. Её нужно импортировать из самой библиотечки final-form.

Затем на странице Login возвращаем санку

let onSubmit = ({ email, password, checkBox, ...rest }) => {
    return props.login(email, password, checkBox)
  }

Как я понял, FORM_ERROR взаимосвязан с submitError который сидит здесь

return <Form
    onSubmit={onSubmit}
    render={({ handleSubmit, form, submitting, pristine, values, submitError }) => (
      <form onSubmit={handleSubmit} className={styles.loginPage}>
        <div className={styles.loginBlock}>
          <h1>Login</h1>
          <Field component={Input} placeholder='Email' name='email' validate={composeValidators(required, maxLength(256))} />

          <Field component={Input} placeholder='Password' name='password' validate={composeValidators(required, minLength(8))} />

          <Field component={CheckBox} name='checkBox' type='checkbox' />

          {submitError && <div className="error">{submitError}</div>}

          <button type='submit' disabled={submitting}>Login</button>
        </div>
      </form >
    )}
  />

И получается когда мы присвоили FORM_ERROR значение в reducer, тогда оно поменялось и для submitError. Получается то значение, которое сидит в FORM_ERROR, сидит и в submitError. Ну и в конце мы просто выводим submitError

{submitError && <div className="error">{submitError}</div>}

Надеюсь помог, если непонятно, то читайте документацию с официального сайта

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.