Comment définir initialValues basé sur async source comme un appel ajax avec redux-forme
Sur les pages officielles et dans le GitHub questions pour redux-forme il y a plus d'un exemple de la façon de travailler avec initialValues cependant je ne peux pas trouver un seul qui se concentre sur l'explication de la façon dont initialValues peut être définie en réponse à une source asynchrone.
La principale affaire que j'ai à l'esprit est quelque chose comme un simple CRUD application où l'utilisateur doit modifier une entité qui existe déjà. Lorsque la vue est tout d'abord ouvert et le redux-forme de composant est monté, mais avant que le composant est rendu, le initialValues doit être définie. Permet de dire que dans cet exemple, les données sont chargées à la demande lorsque le composant est d'abord monté et rendu pour la première fois. Les exemples montrent réglage initialValues basée sur des valeurs codées ou le redux stocker l'état, mais aucun que je peux trouver se concentrer sur la façon de définir la initialValues basé sur quelque chose asynchrone comme un appel à l'XHR ou chercher.
Je suis sûr que je suis juste en manque quelque chose de fondamental merci donc de me diriger dans la bonne direction.
Références:
- L'Initialisation De L'Etat
- Formulaire de manutention par défaut
- Quelle est la bonne façon de remplir un formulaire dynamique avec les données initiales?
Vous devez vous connecter pour publier un commentaire.
EDIT: mise à Jour de la Solution de ReduxForm docs
C'est maintenant documenté dans la dernière version de ReduxForm, et est beaucoup plus simple que ma réponse précédente.
La clé est de
connect
votre formulaire composant après la décorant avec ReduxForm. Ensuite, vous serez en mesure d'accéder à lainitialValues
prop comme tout autre accessoire de votre composant.Je l'ai accompli à l'aide de la redux-forme réducteur de plugin méthode.
Les demos extraction asynchrone des données et pré-remplissage d'un formulaire utilisateur avec la réponse.
Ensuite dans le répertoire racine de votre réducteur où vous incluez votre
redux-form
réducteur de vous votre réducteur de plugin qui remplace les formulaires de valeurs avec le renvoi de données extraites.Enfin, vous vous combinez votre nouvelle formReducer avec les autres réducteurs dans votre application.
values
objet) est important.formReducer.plugin
solution pour l'instant.reduxForm
avecenableReinitialize
seted vrai:reduxForm({ enableReinitialize: true, initialValues: propCanChange })
Par défaut, vous ne pouvez initialiser un composant formulaire une fois par initialValues. Il existe deux méthodes pour réinitialiser le composant formulaire avec de nouvelles "vierges" valeurs:
Passer un enableReinitialize prop ou reduxForm() config paramètre est défini sur true pour permettre à la forme de la réinitialiser à nouveau "primitive" des valeurs à chaque fois que la initialValues prop changements. Pour garder sale les valeurs d'un formulaire lorsqu'il réinitialise, vous pouvez définir keepDirtyOnReinitialize de vrai. Par défaut, la réinitialisation du formulaire remplace toutes les sales valeurs avec "primitive" des valeurs.
L'envoi de l'INITIALISER l'action (à l'aide de l'action créateur fournis par redux-forme).
Référencé à partir de : http://redux-form.com/6.1.1/examples/initializeFromState/
Pourriez-vous le feu de l'envoi sur componentWillMount(), et de définir l'état de chargement.
En cours de chargement, le rendu d'un spinner, par exemple, et seulement lorsque la demande renvoie aux valeurs, à la mise à jour de l'état, et puis re-rendre le formulaire avec les valeurs??
Ici est minime exemple de travail sur la façon de définir initialValues basé sur async source.
Il utilise initialiser action créateur.
Toutes les valeurs de initialValues ne devrait pas être indéfini, ou vous obtenez une boucle infinie.
Bien que cette méthode peut ne pas être la meilleure solution, il fonctionne assez bien pour mes besoins:
Forme.jsx:
BlogActions.jsx:
RenderAlert.jsx:
Réducteurs.jsx