BoryaMogila 1 ноя 2016 в 11:54

Redux-form. Когда работать с формами просто

6 мин

69K

Туториал

Думаю, большинство знает схему работы библиотеки redux: view → action → middlewares → reducers → state → view

Подробности здесь.

Хочу представить вашему вниманию библиотеку, которая работает по тому же принципу для форм.

Документация на английском. Устанавливаем:

 npm install redux-form

Подключаем в наше приложение:

import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'

const reducers = {
  // ваши редюсеры
  form: formReducer     // В state все данные формы будут храниться в свойстве form
}
const reducer = combineReducers(reducers)
const store = createStore(reducer)

Создаем форму:

import React, { Component } from 'react';
// берем компонент поля (Field) и провайдер для формы (reduxForm)
import { Field, reduxForm } from 'redux-form';

class Form extends Component {
    render(){
        // по умолчанию handleSubmit принимает функцию обработчик
        // reset скидывает значения до значений, заданных во время инициализации
        // в данном случае до undefined, так как значение не задано
        const {handleSubmit, reset} = this.props;

        const submit = (values) => console.log(values);

        return (
            <form onSubmit={handleSubmit(submit)}>
                {/* принимает имя поля, тип и остальные свойства, которые расмотрим позже*/}
                <Field name="title" component="input" type="text"/>
                <Field name="text" component="input" type="text"/>
                <div>
                    <button type="button" onClick={reset}>Очистить форму</button>
                    <button type="submit">Отправить форму</button>
                </div>
            </form>
        );
    }
}
Form = reduxForm({
    form: 'post', // имя формы в state (state.form.post)
})(Form);

export default Form;

Расмотрим ситуацию, когда нужно прокинуть обработчик с компонента уровнем выше:

Создадим компонент:

import React, { Component }  from 'react';

import Form from './Form'

class EditPost extends Component{
    constructor(props) {
        super(props);
    }
   
    handleSubmit = (values) => {
        console.log(values);
    };
    render() {
        let {post, dispatch} = this.props;
        return (
            <div>
                {/* передаем обработчик*/}
                <Form onSubmit={this.handleSubmit} />
            </div>
        );
    }
}

И изменим нашу форму:

// меняем <form onSubmit={handleSubmit(submit)}> на 
<form onSubmit={handleSubmit}>

Если нам надо задать значение, при инициализации используем actionCreator initialize, который принимает первым параметром название формы, вторым объект с значениями. Например, для статьи по id:

import React, { Component }  from 'react';
// подключаем метод
import {initialize} from 'redux-form';
import {connect} from 'react-redux';

import Form from './Form'

class EditPost extends Component{
    constructor(props) {
        super(props);
        // post = {title: " Текст заголовка ", text: " Текст статьи "}
        let {post, initializePost} = this.props;
        // инициализация
        initializePost(post);
    }
   
    handleSubmit = (values) => {
        console.log(values);
    };
    render() {
        return (
            <div>
                <Form onSubmit={this.handleSubmit} />
            </div>
        );
    }
}
// прокидываем в props функцию для инициализации формы
function mapDispatchToProps(dispatch){
    return {
        initializePost: function (post){
            dispatch(initialize('post', post));
        }
    }
}
// прокидываем в props объект для инициализаци формы
function mapStateToProps(state, ownProps){
    const id = ownProps.params.id;
    return {
       post: state.posts[id]
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(EditPost);

Остальные action creators можно посмотреть здесь.

Если нас не устраивает стандартное поле, мы можем передавать свой вариант верстки и действий:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

class Form extends Component {
   // функция, которая возвращает свою реализацию
   renderField = ({ input, label, type}) => (
        <div>
            <label>{label}</label>
            <div>
                <input
                    {...input} placeholder={label} type={type}/>
            </div>
        </div>
    );
    render(){
        const {handleSubmit, reset} = this.props;

        return (
            <form onSubmit={handleSubmit}>
                {/* принимает функцию с реализацией поля*/}
                <Field name="title" component={this.renderField}  label="Заголовок" type="text"/>
                <Field name="text" component={this.renderField}  label="Текст" type="text"/>
                <div>
                    <button type="button" onClick={reset}>Очистить форму</button>
                    <button type="submit">Отправить форму</button>
                </div>
            </form>
        );
    }
}
Form = reduxForm({
    form: 'post'
})(Form);

export default Form;

Подробнее про компонент Field.

Redux-form поддерживает три вида валидации:

Синхронная валидация
Асинхронная валидация
Валидация во время сабмита

Для синхронной и асинхронной валидации создадим файл formValidate.js:

// синхронная валидация
export const validate = values => {
    const errors = {};
    if(!values.text){
        errors.text = 'Поле обязательно для заполнения!';
    } else if (values.text.length < 15) {
        errors.text = 'Текст должен быть не менее 15 символов!'
    }
    // для синхронной валидации нужно вернуть объект с ошибками
    return errors
};

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
//асинхронная валидация
//принимает два параметра значения и redux dispatch
export const asyncValidate = (values/*, dispatch */) => {
    return sleep(1000) // имитация серверного ответа
        .then(() => {
            if (!values.title) {
                // для асинхронной валидации нужно бросить объект с ошибкой
                throw {title: 'Поле обязательно для заполнения!'}
            } else if (values.title.length > 10) {
                throw {title: 'Заголовок должен быть не более 10 символов!'}
            }
        })
};

Для валидации во время сабмита нужно изменить обработчик сабмита так, чтобы он возвращал промис:

import React, { Component }  from 'react';
// подключаем класс ошибки для формы
import {initialize, SubmissionError} from 'redux-form';
import {connect} from 'react-redux';
import Form from './Form';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
class EditPost extends Component{
    constructor(props) {
        super(props);
    }
   
    handleSubmit = (values) => {
        /* возвращаем промис
           erros в нашем случае это объект, в котором ключ - это название поля с ошибкой
           Например, {title: "Неверно введен заголовок"}*/
        return sleep(1000) {// симуляция ответа сервера}
          .then(({errors, ...data}) => {
             if (errors) {
                // бросаем экземпляр класса ошибки с текстами ошибок
                // _error общая ошибка для формы
                throw new SubmissionError({ ...errors, _error: 'Статья не добавлена!' })
             } else {
                // ошибок нет, обрабатываем данные data
            }
       })
    };
    render() {
        return (
            <div>
                {/* передаем обработчик*/}
                <Form onSubmit={this.handleSubmit} />
            </div>
        );
    }
}
function mapDispatchToProps(dispatch){
    return {
        initializePost: function (post){
            dispatch(initialize('post', post));
        }
    }
}
function mapStateToProps(state, ownProps){
    const id = ownProps.params.id;
    return {
       post: state.posts[id]
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(EditPost);

А теперь подключим валидацию и организуем вывод ошибок:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import {validate, asyncValidate} from '../formValidate';

class Form extends Component {
   renderField = ({ input, label, type, meta: { touched, error, warning }}) => (
        <div>
            <label>{label}</label>
            <div>
                <input {...input} placeholder={label} type={type}/>
                {/* ошибка для поля*/}
                {touched && ((error && <div>{error}</div>))}
            </div>
        </div>
    );
    render(){
        const {handleSubmit, reset, error} = this.props;

        return (
            <form onSubmit={handleSubmit}>
                {/* принимает функцию с реализацией поля*/}
                <Field name="title" component={this.renderField}  label="Заголовок" type="text"/>
                <Field name="text" component={this.renderField}  label="Текст" type="text"/>
                <div>
                    <button type="button" onClick={reset}>Очистить форму</button>
                    <button type="submit">Отправить форму</button>
                    {/*общая ошибка для формы*/}
                    {error && <div>{error}</div>}
                </div>
            </form>
        );
    }
}

Form = reduxForm({
    form: 'post',
    // подключение валидации
    validate,
    asyncValidate
})(Form);

export default Form;

Для тех, кто хочет посмотреть пример работы, делаем так:

 git clone https://github.com/BoryaMogila/koa_react_redux.git;
 git checkout redux-form;
 npm install;
 npm run-script run-with-build;

И пробуем CRUD приложение с использованием redux-form по ссылке localhost(127.0.0.1):4000/app/.

При асинхронной валидации возможен конфуз: при нажатии сабмита до ответа с сервера сабмит сработает.

В документации есть еще много интересного и полезного. Рекомендую к просмотру.

P.S.: Как всегда жду конструктива.

Теги:

reactjs nodejs javascript

Хабы:

Redux-form. Когда работать с формами просто

Публикации

Работа

Ближайшие события