Comment synchroniser de la Redux de l'état et de requête d'url params

Question

J'ai une page web avec un panneau de recherche. Le panneau de recherche a plusieurs champs: id, de la taille, ...

Ce que je veux, c'est lorsque l'utilisateur de définir des valeurs de recherche (par exemple: id=123 et taille=45) et appuyez sur un bouton de recherche:

1. searchState dans Redux réducteur doit être mis à jour avec de nouvelles valeurs de recherche (id=123 et taille=45)
2. L'URL devrait être changé en "http://mydomain/home?id=123&size=45"

Et d'autre part, si l'utilisateur a changé d'URL http://mydomain/home?id=111&size=22 quand:

1. searchState dans le réducteur doit être changé avec les nouvelles valeurs de recherche (id=111 et taille=22)
2. L'INTERFACE utilisateur de recherche entrées du panneau doit être mis à jour avec de nouvelles valeurs (id=111 et taille=22)

Comment arriver à l'objectif? Ce routeur dois-je utiliser (réaction de-routeur, redux-routeur, réagissent-routeur-redux ot d'autres)?

Answer 1

Je dirais juste à l'aide de Réagir Routeur directement et pas en gardant searchState dans Redux. Réagir Routeur va injecter des paramètres d'URL dans vos composants, et vous pouvez les utiliser en mapStateToProps(state, ownProps) pour calculer la finale des accessoires.

Si vous voulez vraiment voir des changements d'itinéraire, comme les actions, vous pouvez utiliser réagir-routeur-redux pour les deux sens de la synchronisation, mais il ne vous donnera pas les paramètres dans l'état-juste à l'emplacement actuel. Le seul cas d'utilisation pour cela, si vous souhaitez enregistrer et rejouer des actions, et ont la barre d'URL de mise à jour que vous replay.

Il n'est pas nécessaire dans la plupart des cas, seulement à l'aide de Réagir Routeur directement est assez.

Answer 2

En bref: Vous pouvez utiliser redux-requête de synchronisation pour conserver les paramètres de l'URL et des champs dans le magasin de synchronisation. Elle fonctionne sans Routeur.

---

Longue histoire: Aux prises avec la même question, j'ai d'abord apprécié Dan Abramov de réponse, ce qui suggère (dans mes mots) d'envisager l'URL comme un "deuxième magasin", une partie de l'état de l'application à l'extérieur de la Redux magasin. Mais ensuite, j'ai trouvé que le fait d'avoir deux sortes de "magasins" rend difficile à modifier le code, par exemple pour aller de l'un à l'autre, parce que chaque 'store' a une interface différente. En tant que développeur, je voudrais plutôt pour sélectionner l'un des champs de mon Redux de l'état, et de l' exposer dans l'URL, comme si l'emplacement étaient une petite fenêtre (une partie de) mon état.

Donc, je viens de publier redux-requête de synchronisation, pour vous permettre de fournir un sélecteur de fonction pour sélectionner une valeur à partir de l'état, qui est ensuite exposée dans la fenêtre d'emplacement à un nom de paramètre que vous spécifiez. Aussi laisser de synchronisation dans l'autre sens, donc à partir de l'URL pour Redux de l'état (par exemple, lorsque l'application du chargement initialement), vous pouvez établir un créateur qui sera transmis à la valeur du paramètre, de sorte que votre réducteur pouvez mettre à jour l'état en conséquence.

Answer 3

Voici la manière dont j'ai été la manipulation de la première scénario:

• Lorsque la valeur d'entrée des changements, de son composant déclenche un rappel qui a été adoptée comme un accessoire de son conteneur.

• Dans le rappel, le conteneur, les dépêches de l'action responsable de la mise à jour de Redux de l'état lorsque l'événement se produit.

• Dans la ligne qui suit immédiatement l'action, j'utilise this.context.router.push() et de transmettre l'url avec la bonne chaîne de requête.

Je ne suis pas certain que ce soit la bonne approche. J'ai trouvé qu'il est préférable de mettre à jour l'URL d'abord parce que, à mon avis, la chaîne de requête doit être un reflet de l'état plutôt que le maître de celui-ci.

Concernant le scénario inverse, je ne suis vraiment pas sûr. Il semble que la configuration manuelle de l'adresse URL déclencher un rechargement complet, mais je peux me tromper.

Pour quel routeur à utiliser, je suis à l'aide de Réagir Routeur par lui-même. Je n'ai pas vraiment trouver de la valeur en utilisant les autres, et que cette discussion a été le coup de massue pour moi.

Answer 4

J'ai récemment fini de travailler sur un problème similaire. J'ai utilisé MobX que mon magasin et redux-routeur comme mon routeur. (Je l'ai fait très bien avec réagissent-routeur, mais il fallait que je l'envoi d'une action de poussée en dehors de la composante - redux mondial de la boutique fonctionne très bien ici)

Ma solution a été de même pour ce qui cantera a décrit mon routeur état n'est que le reflet de la forme de l'état. Cela a l'avantage supplémentaire de ne pas avoir à abandonner mon état et dépendent entièrement sur le routeur de l'état.

---

Dans le premier scénario,

1) - je mettre à jour mon formulaire de saisie comme d'habitude, qui déclenche un nouveau rendu dans les résultats de la composante.

2) En componentDidUpdate() des résultats de la composante, j'ai utiliser le formulaire accessoires pour construire la mise à jour de la chaîne de requête.

3) j'ai pousser la mise à jour de la chaîne de requête pour le routeur de l'état. C'est purement pour l'effet de la mise à jour de l'URL.

---

Pour le deuxième scénario

1) En onEnter crochet sur la racine Route composant, j'ai profiter de la chaîne de requête et d'analyser dans le formulaire initial de valeurs.

2) - je mettre à jour mon magasin avec les valeurs. Ce n'est que pour le premier chargement de la page, et la seule fois que le routeur de l'état dicte la forme de l'état.

---

Edit: Cette solution ne prend pas en compte le cas lorsque vous revenez en arrière dans l'historique de votre navigateur, parce que l'url ne sera pas de mise à jour de votre état.

Answer 5

Je recommanderais le nouveau outil de réagir-l'url de la requête qui va faire que la synchronisation relativement simple.