Проблема такая, я не знаю как правильно показывать ошибки формы в 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;