Je suis à l'aide de Redux. Dois-je gérer entrée contrôlée par l'état dans le Redux stocker ou utiliser setState au niveau du composant?

1. Vous pouvez utiliser le composant de l'etat. Et puis prendre de l'etat et de lui donner comme argument à l'action. C'est à peu près le "Réagir de façon" comme décrit dans la Réagir Docs.

2. Vous pouvez aussi consulter les Redux Forme. Il n'est, fondamentalement, ce que vous avez décrite, et relie les entrées d'un formulaire avec Redux État.

La première méthode implique essentiellement que vous êtes en train de faire tout manuellement - un maximum de contrôle et maximum standard. La deuxième façon qui signifie que vous êtes en laissant le plus élevé composante de l'ordre de faire tout le travail pour vous. Et puis il y a tout entre les deux. Il existe plusieurs packages que j'ai vu que simplifier un aspect spécifique de la gestion de formulaire:

1. Réagir Formes -
   Il fournit un tas de helper composants, afin de rendre l'affichage du formulaire et de la validation des plus simples.

2. Réagir JSON schema -
   Vous permet de construire un formulaire HTML à partir d'un schéma JSON.

3. Formsy Réagir -
   La description dit: "Cette extension de Réagir JS vise à être le "sweet spot" entre la flexibilité et la possibilité de réutilisation."

Mise à jour: semble que ces jours Redux Formulaire est remplacé par:

1. Réagir Forme Finale

Et un de plus important concurrent dans l'espace qui vaut le détour est:

1. Formik

TL;DR

C'est bien d'utiliser tout ce qu'il semble adapté à votre application (Source: Redux docs)

---

Certaines règles communes de pouce pour la détermination de ce type de données doit être
mettre en Redux:

• Faire d'autres parties de la demande de soins sur ces données?
• Avez-vous besoin pour être en mesure de créer de nouvelles données dérivées basées sur ces données d'origine?
• Sont les mêmes que celles utilisées pour piloter plusieurs composants?
• Est-il de la valeur pour vous d'être en mesure de restaurer cet état à un moment donné dans le temps (c'est à dire, le voyage dans le temps de débogage)?
• Voulez-vous mettre en cache les données (c'est à dire, utiliser ce qui est dans l'état si elle est déjà là, au lieu de re-demander)?

Ces questions peuvent facilement vous aider à identifier l'approche qui serait le mieux approprié à votre application. Voici mes points de vue et des approches que j'utilise dans mes applications (pour les formulaires):

Locales de l'état

• Utile lors de mon formulaire n'a aucune relation avec les autres composants de l'INTERFACE utilisateur. Juste capturer des données de input(s) et la soumet. J'utilise ce la plupart du temps pour des formes simples.
• Je ne vois pas beaucoup de cas d'utilisation en voyage dans le temps de débogage, le flux d'entrée de mon formulaire (à moins qu'un autre composant de l'INTERFACE utilisateur dépend de ce).

Redux état

• Utile lorsque le formulaire de mise à jour de certains autres composant de l'INTERFACE utilisateur de mon application (un peu comme la liaison bidirectionnelle).
• Je l'utiliser lors de mon formulaire input(s) provoque quelques autres composants de render selon ce qui est entrée par l'utilisateur.

À l'aide de l'assistant des bibliothèques est juste plus rapide et d'éviter de nous tous le passe-partout. Ils peuvent être optimisées, riche en fonctionnalités, etc ... Comme ils font tous les différents aspects de plus d'une brise. De les tester et de faire de votre arsenal que de savoir ce qui est utile et de mieux les différents besoins, c'est juste la chose à faire.

Mais si vous avez déjà mis en œuvre tout ce qui vous. Va le manière contrôlée. Et pour une raison vous avez besoin redux. Dans un de mes projets. J'avais besoin de maintenir la forme des états. Donc, si je vais sur une autre page et de revenir il va rester dans le même état. Vous avez seulement besoin de redux, si c'est un moyen de communiquer le changement de multiples composants. Ou si c'est un moyen pour stocker l'état, que vous avez besoin de restaurer.

Vous avez besoin redux, si l'état doit être mondial. Sinon, vous n'en avez pas besoin. Pour cette question, vous pouvez consulter cet excellent article ici pour une plongée profonde.

L'un des problèmes que vous pouvez rencontrer! Lors de l'utilisation de la contrôlée entrées. Est que vous pouvez juste envoi les changements à chaque frappe de touche. Et votre formulaire vais commencer gel. Il est devenu un escargot.

Vous ne devriez jamais directement d'expédition et d'utiliser le redux flux, à chaque changement.
Ce que vous pouvez faire, c'est d'avoir l'état des entrées stockées sur la composante locale de l'état. Et mise à jour à l'aide de setState(). Une fois le changement d'état, vous réglez une minuterie avec un retard. Il se annulé à chaque frappe de touche. la dernière frappe sera suivie par l'envoi d'action après le délai spécifié. (un bon délai peut être 500ms).

(Savoir que setState, par défaut, gérer les multiples successifs de frappe efficace. Sinon, nous avons utilisé la même technique que mentionné ci-dessus (comme nous le faisons dans vanilla js) [mais ici, nous nous appuierons sur setState])

Voici un exemple ci-dessous:

onInputsChange(change, evt) {
    const { onInputsChange, roomId } = this.props;

    this.setState({
        ...this.state,
        inputs: {
            ...this.state.inputs,
            ...change
        }
    }, () => {
        //here how you implement the delay timer
        clearTimeout(this.onInputsChangeTimeoutHandler); //we clear at ever keystroke
              //this handler is declared in the constructor
        this.onInputsChangeTimeoutHandler = setTimeout(() => {
           //this will be executed only after the last keystroke (following the delay)
            if (typeof onInputsChange === "function")
                    onInputsChange(this.state.inputs, roomId, evt);
        }, 500);
    })
}

Vous pouvez utiliser l'anti-modèle pour l'initialisation de la composante en utilisant les accessoires comme suit:

constructor(props) {
    super(props);

    const {
        name,
        description
    } = this.props;

    this.state = {
        inputs: {
            name,
            description
        }
    }

Dans le constructeur ou dans la componentDidMount crochet comme ci-dessous:

componentDidMount () {
    const {
        name, 
        description
    } = this.props;

    this.setState({
        ...this.state,
        inputs: {
            name,
            description
        }
    });
}

Le plus tard nous permettre de restaurer l'état de la boutique, à chaque composant de montage.

Aussi, si vous avez besoin de changer la forme d'un composant parent, vous pouvez exposer une fonction pour le parent. En définissant pour setInputs() méthode qui est lié. Et dans la construction, vous exécutez les accessoires (qui est une méthode de lecture) getSetInputs(). (Utile lorsque vous souhaitez réinitialiser les formes à certaines conditions ou des états).

constructor(props) {
    super(props);
    const {
         getSetInputs
    } = this.props;

   //.....
   if (typeof getSetInputs === 'function') getSetInputs(this.setInputs);
}

À mieux comprendre ce que j'ai fait ci-dessus, voici comment je suis à jour les entrées:

//inputs change handlers
onNameChange(evt) {
    const { value } = evt.target;

    this.onInputsChange(
        {
            name: value
        },
        evt
    );
}

onDescriptionChange(evt) {
    const { value } = evt.target;

    this.onInputsChange(
        {
            description: value
        },
        evt
    );
}

/**
 * change = {
 *      name: value
 * }
 */
onInputsChange(change, evt) {
    const { onInputsChange, roomId } = this.props;

    this.setState({
        ...this.state,
        inputs: {
            ...this.state.inputs,
            ...change
        }
    }, () => {
        clearTimeout(this.onInputsChangeTimeoutHandler);
        this.onInputsChangeTimeoutHandler = setTimeout(() => {
            if (typeof onInputsChange === "function")
                onInputsChange(change, roomId, evt);
        }, 500);
    })
}

et voici mon formulaire:

 const {
name='',
description=''
} = this.state.inputs;
//....
<Form className="form">
<Row form>
<Col md={6}>
<FormGroup>
<Label>{t("Name")}</Label>
<Input
type="text"
value={name}
disabled={state === "view"}
onChange={this.onNameChange}
/>
{state !== "view" && (
<Fragment>
<FormFeedback
invalid={
errors.name
? "true"
: "false"
}
>
{errors.name !== true
? errors.name
: t(
"You need to enter a no existing name"
)}
</FormFeedback>
<FormText>
{t(
"Enter a unique name"
)}
</FormText>
</Fragment>
)}
</FormGroup>
</Col>
{/* <Col md={6}>
<div className="image">Image go here (one day)</div>
</Col> */}
</Row>
<FormGroup>
<Label>{t("Description")}</Label>
<Input
type="textarea"
value={description}
disabled={state === "view"}
onChange={this.onDescriptionChange}
/>
{state !== "view" && (
<FormFeedback
invalid={
errors.description
? "true"
: "false"
}
>
{errors.description}
</FormFeedback>
)}
</FormGroup>
</Form>