web-dev-qa-db-fra.com

Comment gérer les paramètres de requête dans react + react-router + flux

J'essaie de remplacer une application Backbone.Marionette pour React et j'ai du mal à penser aux paramètres de requête. Je pense que je manque une paix très simple pour comprendre ce modèle, donc je m'excuse si cela question est totalement absurde. Je vous serais reconnaissant de tout soutien ou tout simplement me diriger vers une direction que je peux google plus spécifiquement.

Il y a un /users page qui répertorie les utilisateurs et vous pouvez filtrer les utilisateurs via la barre de recherche. Donc, si vous souhaitez filtrer les utilisateurs qui contiennent "joe" dans leur nom d'utilisateur, je ferais une demande au serveur avec des paramètres de requête comme /users?username=joe. De plus, je peux paginer en ajoutant également un paramètre page (/users?username=joe&page=1).

Si je ne pense qu'à la fonctionnalité, le flux serait probablement

  1. Le client insère joe dans l'élément d'entrée et clique sur Rechercher .
  2. Cliquer sur le bouton Rechercher déclenche un Action (comme Action.getUser).
  3. Action fait une requête au serveur et reçoit les résultats
  4. Le Dispatcher distribue une fonction avec la charge utile des résultats à quiconque (généralement le Store) est intéressé par le Action.
  5. L'état du Store change avec le nouveau résultat reçu par le Action
  6. La vue (Component) effectue un nouveau rendu en écoutant les modifications de Store.

et cela fonctionne comme prévu. Cependant, j'aimerais que le client puisse mettre en signet le résultat filtré actuel et pouvoir revenir à la même page un peu plus tard. Cela signifie que j'aurai besoin d'un endroit pour enregistrer des informations explicites sur le terme de recherche créé par le client, qui est généralement l'URL (ai-je raison?). Je vais donc devoir mettre à jour l'URL avec les paramètres de requête pour enregistrer le terme de recherche (/users?username=joe&page=1).

Ce que je ne sais pas, c'est où et quand mettre à jour l'URL? Ce que je peux trouver en ce moment, ce sont les 2 options ci-dessous - et elles ne semblent pas du tout propres.

Option 1

  1. Le client insère joe dans l'élément d'entrée et clique sur Rechercher .
  2. Cliquer sur le bouton Rechercher déclenche une transition du ReactRouter avec les nouveaux paramètres de requête (/users?username=joe&page=1).
  3. La vue (Component) reçoit les nouveaux paramètres via this.props.params et this.props.query.
  4. La vue (Component) déclenche un Action comme Action.getUser selon les paramètres de requête qu'il reçoit - dans ce cas username=joe&page=1.

après cela, c'est la même chose que ci-dessus

Option 2 (seulement 6 est différent de ce que j'ai expliqué ci-dessus)

  1. Le client insère joe dans l'élément d'entrée et clique sur Rechercher .
  2. Cliquer sur le bouton Rechercher déclenche un Action (comme Action.getUser).
  3. Action fait une requête au serveur et reçoit les résultats
  4. Le Dispatcher distribue une fonction avec la charge utile des résultats à quiconque (généralement le Store) est intéressé par le Action.
  5. L'état du Store change avec le nouveau résultat reçu par le Action
  6. La vue (Component) effectue un nouveau rendu en écoutant les modifications de Store. Et en quelque sorte (je ne sais pas encore comment) met à jour son URL en fonction de son props (comme this.props.searchusername, et this.props.searchpage)

Quelle est la meilleure pratique pour gérer les paramètres de requête? (ou cela peut ne pas être spécifique aux paramètres de requête) Suis-je complètement incompris du modèle de conception ou de l'architecture? Merci d'avance pour tout soutien.

Quelques articles que j'ai lus

reactjsfluxreact-router
24
kenfdev

Je ne sais pas exactement ce que vous entendez par

cela signifie que je devrai mettre à jour l'URL pour enregistrer les informations (/ users? username = joe & page = 1).

Vous aurez probablement une structure similaire à celle-ci.

TopContainer.jsx - Users.jsx - une liste de User.jsx

Habituellement, TopContainer surveillera tous les magasins et si quelque chose a changé, le transmettre à users.jsx. De cette façon, dans Users.jsx, vous pouvez simplement rendre this.props.users sans vous soucier de tout rendu.

Les actions de recherche d'utilisateurs se produisent généralement dans l'événement componentWillMount de TopContainer, et vous la page écoutera UserStore. C'est un bon endroit pour ajouter des paramètres de requête. Quelque chose comme ça marcherait

  componentWillUnmount() {
    let searchTerm = router.getCurrentQuery().searchTerm;
    UserActions.searchUsers(searchTerm)
  },

La page ne se soucie pas vraiment si l'url a ou non des paramètres de requête, elle montre simplement tout ce qui se trouve dans le magasin de l'utilisateur.

Ensuite, une fois la recherche terminée, Users.jsx sera rechargé et affichera les résultats corrects

1
yujingz

Je considérerais la meilleure pratique comme étant le bouton d'envoi ne définissant que la requête d'emplacement (nom d'utilisateur). Le reste doit être pris en charge par le composant de réaction principal qui est affecté en tant que composant de routeur. Par cela, vous pouvez être sûr que chaque fois que vous revisitez ou partagez l'url, ils peuvent obtenir les mêmes résultats. Et c'est aussi très générique.

Quelque chose comme ça:

let myQuery = this.props.location.query;
if (myQuery.username) {
  let theUser = myQuery.username;
  this.setState({
    userName = myQuery.username
  });
} else {
  this.setState({
    userName = false //Show All
  });
}

Et puis utilisez cet état "userName" pour envoyer au serveur avec lequel effectuer la recherche. De cette façon, vous n'aurez pas besoin d'itérer le code du composant qui s'occupe de lister les utilisateurs puisque le serveur envoie déjà les données pertinentes.

D'après mon expérience de l'utilisation des requêtes de localisation dans React, j'ai été très satisfait de leurs cycles de réactivité et de leurs performances. Je recommande fortement de conserver chaque état d'application différent en fonction de l'URL.

2
Emo