web-dev-qa-db-fra.com

Que signifient «déshydrater» et «réhydrater» dans Fluxible?

Je travaille sur une application minimale qui fonctionne avec Fluxible. Presque tout semble clair mais une chose: le concept d'état déshydraté et réhydraté.

J'ai compris que c'est ce qui est nécessaire pour synchroniser le magasin entre le client et le serveur, mais je ne sais pas pourquoi. Cette ligne est très floue pour moi:

 var exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

Dans server.js ( https://github.com/yahoo/fluxible/tree/master/examples/react-router )

J'apprécierais vraiment si vous pouviez me dire en "simple mot" ce que cela signifie.

node.jsreactjsfluxible
45
Kai23

Dans le contexte de Fluxible, déshydrater votre application signifie extraire son état en objet. La réhydratation de votre application utilise ce même objet pour réinjecter l'état dans votre application. L'objet représentant l'état de votre application doit être sérialisable afin de l'envoyer sur le réseau.

Disons que je veux pré-rendre mon application sur le serveur, servir le code HTML au client, puis rendre à nouveau mon application sur le client. Ce serait trivial si mon application ne comprenait que des données statiques. Cependant, mon application est avec état: elle récupère les données de mon API avant le rendu initial et les stocke. En extrayant l'état de mon application sur le serveur, en l'envoyant avec le HTML, puis en la réinjectant sur le client, j'évite de faire deux requêtes à mon API.

58
Alexandre Kirszenberg

Les réponses ci-dessus sont excellentes, mais je pense que nous pourrions encore expliquer un peu mieux cette métaphore, avec la pizza. Considérez cette scène de Back to The Future 2:

back to the future 2 pizza hydrator

Il y a deux composants cruciaux dans cette scène: la pizza Pizza Hut déshydratée et l'hydrateur Black & Decker . Ignorez un instant que nous aurons également besoin d'un déshydrateur pour compléter la métaphore.

La pizza déshydratée est tout ce qui est nécessaire pour la représentation d'une pizza complète, mais comme le dit l'emballage, "NE PAS CONSOMMER À MOINS D'ÊTRE RÉHYDRATÉ". La pizza déshydratée, telle qu'elle est rendue par le serveur, a l'air savoureuse, mais n'est en fait pas complètement engageante en elle-même.

Votre application est à la fois des instructions d'hydrateur, de pizza et de boîte à pizza pour grand-mère McFly. Grand-mère McFly est le navigateur . Lorsqu'un utilisateur demande la page de pizza "moitié pepperoni/moitié poivrons verts", le backend envoie une pizza déshydratée ET un hydratant Black & Decker. Grand-mère McFly (navigateur) lit attentivement toutes les instructions et hydrate la pizza pour l'utilisateur. C'est une très bonne chose car l'utilisateur est un idiot et ne connaît pas la différence entre les pizzas hydratées et déshydratées, tout comme Marty Jr.:

Marty Jr .: (o.s) Grand-mère, pouvez-vous simplement me fourrer [la pizza déshydratée] dans ma bouche? (des rires)

Marty: (o.s) Ne sois-tu pas un cul intelligent!

Jusqu'ici tout va bien, non? Bénéfice jusqu'à présent:

  • l'utilisateur obtient la pizza entière (déshydratée) et l'hydrateur à la première demande, plutôt que de simplement obtenir l'hydrateur et d'avoir à faire un appel (service Web xhr) pour commander la pizza
  • les robots d'exploration du Web sont des utilisateurs particulièrement stupides, qui obtiennent tout ce dont ils ont besoin en regardant des pizzas surgelées et n'ont pas besoin d'une grand-mère McFly pour lire les instructions et rendre la pizza interactive en l'hydratant

Mais attendez, il y a plus! L'utilisateur attrape une tranche ou deux, puis s'enfuit, laissant le reste de la pizza. Comme cela se produit, grand-mère McFly sait par les instructions de la boîte à pizza pour enregistrer l'état de la pizza modifiée. Elle (côté client) le met dans un déshydrateur (non illustré) et le renvoie dans le placard (serveur). Si et quand l'utilisateur revient pour terminer sa pizza mi-pepperoni/mi-piment, tout le processus pizza/hydratant/grand-mère déshydraté se reproduira et il sera toujours frais, ainsi que les modifications qu'il a apportées.

Revoyons:

  • Déshydrater, c'est extraire l'état actuel d'une application et le sérialiser en objet. Cela peut être fait côté serveur ou côté client.
  • Réhydrater, c'est interpréter l'objet d'état (créé par déshydratation) et transformer l'application en une délicieuse pizza interactive.
  • Il est utile de passer un objet d'état déshydraté dans la direction soit: du serveur au client, ou du client au serveur.

La fin! Sauf pas vraiment.

Il y a encore une partie magique secrète pour que cette métaphore fonctionne, c'est que chaque fois que nous hydratons une pizza, nous gardons la pizza déshydratée intacte. Nous nous retrouvons donc avec une pizza déshydratée et une pizza hydratée, puis nous les synchronisons si nécessaire dans les coulisses. Dans le cas de Flux, cela se fait par le biais de nombreux magasins qui composent votre application. Dans Redux, vous n'avez qu'un seul magasin de premier niveau, ce qui peut être un peu plus simple à comprendre.

60
wesww

Déshydrater est un autre mot pour sérialiser et réhydrater signifie désérialiser.

Gonflage == (ré) hydratant == désérialisation

Ainsi, la ligne de code sérialise un état de routeur et affecte l'objet à window.app qui est accessible depuis le client

Mise à jour

Exemple d'utilisation de la sérialisation:

Supposons que nous avons un objet utilisateur et que nous voulons conserver une référence de l'utilisateur actuellement connecté entre les demandes. Nous pouvons sérialiser l'utilisateur en prenant simplement son identifiant et en l'enregistrant dans la session. Ce serait la sérialisation ou la déshydratation de l'objet utilisateur. Pour hydrater ou désérialiser, nous prenons simplement l'id de la session, trouvons notre utilisateur dans la base de données et remplissons à nouveau l'objet utilisateur. Le but ici est de maintenir l'empreinte mémoire aussi faible que possible.

Dans l'un des exemples de fluxable, la fonction déshydrater renvoie simplement le nom de l'état actuel et la fonction hydrate prend le nom de l'état comme argument et le définit comme état actuel. Je pense que les objets états complets sont disponibles sur le client ainsi que sur le serveur. Donc, puisque vous n'avez pas besoin d'envoyer l'état entier, vous n'envoyez que le nom de l'état. La fonction de déshydrater est aussi simple que

State.dehydrate = function(){
    return this.currentStateName;
}
16
Molda