Comment câbler redux-forme des liaisons à la forme des entrées

redux-forme est un très convaincante de la bibliothèque pour fournir redux liaisons pour les formulaires dans une réagir application, qui doit être super pratique. Malheureusement, à l'aide de la bibliothèque d'exemples, je ne suis pas à se lier rien, ce qui est super pratique.

Je suis d'essayer d'utiliser l'exemple de code sur le site du projet, et de trouver de multiples obstacles, malgré la tentative de reproduire fidèlement. Où suis-je une mauvaise interprétation de cette API? A l'API changé depuis que la démo de code a été écrit? Suis-je en manquant de certaines critiques et évidente de la pièce de redux connaissances?

Problème 1: la signature de la handleSubmit méthode doit être handleSubmit(data). Mais handleSubmit est en train d'avoir seulement la Réagir syntheticEvent de les soumettre l'action, et pas de données. (En fait, à l'aide de l'exemple comme l'écrit a été l'envoi de deux événements distincts, apparemment à cause de la pile de onSubmit action sur la forme et le onClick sur le bouton.) Où est-ce que les données censé venir, et pourquoi suis-je à défaut de les transmettre au gestionnaire?

Problème 2: il y a une critique fields objet doit être défini dans le formulaire parent et fourni comme accessoire à votre formulaire. Malheureusement, la forme de la fields objet n'est pas expliqué dans les docs, ni son but, vraiment. Est-il essentiellement de l'état initial de l'objet? Un simple conteneur de l'objet pour redux-forme à utiliser lors de l'exécution pour les erreurs, etc? J'ai eu à arrêter erroring par la correspondance de la des accessoires sur fields pour les noms de champ dans connectReduxForm, mais parce que les données n'est pas contraignant, je suis en supposant que ce n'est pas la bonne forme.

Problème 3: Les champs sont censés être auto-lié à des gestionnaires pour onBlur et onChange, afin qu'ils mettent à jour les stocker de manière appropriée. Jamais cela n'arrive. (Ce qui, nous pouvons le voir grâce à la Redux dev-tools. Cependant, handleSubmit le succès de l'expédition de la initialize action, ce qui suggère le magasin, réducteur, et d'autres de base de plomberie sont tout le travail.)

Problème 4: validateContact est tir une fois sur l'init, mais jamais plus.

C'est malheureusement trop complexe pour un simple Violon, mais l'ensemble de pensions de titres (c'est juste la base ReduxStarterApp, en plus de ce formulaire POC) est disponible ici.

Et, ici, c'est l'extérieur de la composante:

import React       from 'react';
import { connect } from 'react-redux';
import {initialize} from 'redux-form';
import ContactForm from '../components/simple-form/SimpleForm.js';
const mapStateToProps = (state) => ({
counter : state.counter
});
export class HomeView extends React.Component {
static propTypes = {
dispatch : React.PropTypes.func.isRequired,
counter  : React.PropTypes.number
}
constructor () {
super();
}
handleSubmit(event, data) {
event.preventDefault();
console.log(event); //this should be the data, but is an event
console.log(data); //no data here, either...
console.log('Submission received!', data);
this.props.dispatch(initialize('contact', {})); //clear form: THIS works
return false;
}
_increment () {
this.props.dispatch({ type : 'COUNTER_INCREMENT' });
}
render () {
const fields = {
name: '',
address: '',
phone: ''
};
return (
<div className='container text-center'>
<h1>Welcome to the React Redux Starter Kit</h1>
<h2>Sample Counter: {this.props.counter}</h2>
<button className='btn btn-default'
onClick={::this._increment}>
Increment
</button>
<ContactForm handleSubmit={this.handleSubmit.bind(this)} fields={fields} />
</div>
);
}
}
export default connect(mapStateToProps)(HomeView);

L'intérieur de la forme de la composante:

import React, {Component, PropTypes} from 'react';
import {connectReduxForm} from 'redux-form';
function validateContact(data) {
console.log("validating");
console.log(data);
const errors = {};
if (!data.name) {
errors.name = 'Required';
}
if (data.address && data.address.length > 50) {
errors.address = 'Must be fewer than 50 characters';
}
if (!data.phone) {
errors.phone = 'Required';
} else if (!/\d{3}-\d{3}-\d{4}/.test(data.phone)) {
errors.phone = 'Phone must match the form "999-999-9999"';
}
return errors;
}
class ContactForm extends Component {
static propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired
}
render() {
const { fields: {name, address, phone}, handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit}>
<label>Name</label>
<input type="text" {...name}/>     {/* will pass value, onBlur and onChange */}
{name.error && name.touched && <div>{name.error}</div>}
<label>Address</label>
<input type="text" {...address}/>  {/* will pass value, onBlur and onChange*/}
{address.error && address.touched && <div>{address.error}</div>}
<label>Phone</label>
<input type="text" {...phone}/>    {/* will pass value, onBlur and onChange */}
{phone.error && phone.touched && <div>{phone.error}</div>}
<button type='submit'>Submit</button>
</form>
);
}
}
//apply connectReduxForm() and include synchronous validation
ContactForm = connectReduxForm({
form: 'contact',                      //the name of your form and the key to
//where your form's state will be mounted
fields: ['name', 'address', 'phone'], //a list of all your fields in your form
validate: validateContact             //a synchronous validation function
})(ContactForm);
//export the wrapped component
export default ContactForm;