node.js-Fluxible中的“脱水”和“补水”代表什么?

我正在开发可与fluxible一起使用的最小应用程序。 几乎所有事情似乎都清楚了,但只有一件事:脱水和复水状态的概念。

我知道这是在客户端和服务器之间同步存储所需要的,但是我不知道为什么。 这行对我来说还不清楚:

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

在server.js中[[https://github.com/yahoo/fluxible/tree/master/examples/react-router)]

如果您能用“更简单的词”告诉我,我将不胜感激。

Kai23 asked 2020-07-08T06:43:53Z
3个解决方案
60 votes

上面的答案很棒,但是我认为我们可以用披萨更好地解释这个比喻。 考虑一下《回到未来2》中的场景:

back to the future 2 pizza hydrator

这个场景中有两个关键组成部分:脱水的必胜客披萨和Black&Decker水化器。 暂时忽略一下,我们还需要一个脱水器来完成这个比喻。

脱水的比萨饼是代表完整比萨饼所必需的一切,但是正如包装纸告诉我们的那样,“除非完全脱水,否则不要食用”。 服务器提供的脱水比萨饼看起来很美味,但实际上本身并没有完全参与其中。

您的应用程序既是McFly奶奶的水合剂,比萨饼,又是比萨饼盒说明。 浏览器是McFly奶奶。 当用户请求“半意大利辣香肠/半青椒”比萨饼页面时,后端将发送脱水的比萨饼和Black&Decker水化器。 McFly奶奶(浏览器)会仔细阅读所有说明,并为用户浇灌比萨饼。 这是一件非常好的事情,因为用户是个白痴,并且不像Marty Jr.那样,不知道或不在乎水合和脱水比萨饼之间的区别:

小马丁(Marty Jr.):(o)奶奶,您能把[脱水的比萨饼]塞进我的嘴里吗? (笑)

马蒂:(o.s)你不是个聪明人!

到目前为止一切顺利,对吗? 到目前为止的好处:

  • 用户在第一个请求上获得了整个(脱水的)比萨饼和水合器,而不仅仅是获得水化器并不得不打一个(网络服务xhr)电话订购比萨饼
  • 网络爬虫尤其笨拙,他们可以通过查看冷冻的比萨获得所需的一切,而无需McFly奶奶阅读说明并通过给比萨加水来使其互动

但是,等等,还有更多! 用户抓住一片或两片然后跑掉,剩下比萨饼。 碰巧的是,麦克弗利奶奶从披萨盒中得知要保存修改后的披萨状态。 她(客户端)将其放入脱水机(未显示)中,然后将其发送回橱柜(服务器)中。 如果并且当用户返回完成他们的半意大利辣香肠/半辣椒比萨饼时,整个脱水比萨饼/水化器/奶奶过程将再次发生,并且将像以往一样新鲜,加上他们所做的更改。

我们来复习:

  • 脱水是指提取应用程序的当前状态并将其序列化为对象。 这可以在服务器端或客户端完成。
  • 补水就是解释状态对象(通过脱水创建),然后将应用渲染为美味的交互式披萨。
  • 沿任一方向传递脱水状态对象很有用:从服务器到客户端,或者从客户端到服务器。

结束! 除了不是真的。

要使这个隐喻发挥作用,还有一个秘密的魔术部分,那就是,每当我们给比萨饼浇水时,实际上都会使脱水的比萨饼保持完整。 因此,我们同时处理了脱水的比萨饼和脱水的比萨饼,然后在幕后根据需要同步它们。 就Flux而言,这是通过许多商店组成的应用程序进行的。 在Redux中,您只有一个顶级商店,这可能更容易理解。

wesww answered 2020-07-08T06:56:19Z
58 votes

在Fluxible上下文中,使应用程序脱水意味着将其状态提取到对象中。 为应用程序补水是使用同一对象在应用程序中重新注入状态。 代表应用程序状态的对象应该可序列化,以便通过网络发送它。

假设我要在服务器上预呈现我的应用程序,将html提供给客户端,然后在客户端上重新呈现我的应用程序。 如果我的应用仅包含静态数据,这将是微不足道的。 但是,我的应用程序是有状态的:它会在初始渲染之前从我的API中检索数据并进行存储。 通过提取服务器上我的应用程序的状态,将其与HTML一起发送,然后将其重新注入客户端,可以避免对API发出两次请求。

Alexandre Kirszenberg answered 2020-07-08T06:54:50Z
16 votes

脱水是序列化的另一个词,而脱水是反序列化的意思。

膨胀==(重新)补水==反序列化

因此,该行代码将路由器的状态序列化,并将对象分配给可从客户端访问的window.app

更新资料

如何使用序列化的示例:

假设我们有一个用户对象,并且希望在请求之间保留当前登录用户的引用。我们可以通过简单地获取用户ID并将其保存到会话中来序列化用户。 那将是用户对象的序列化或脱水。 要进行水合或反序列化,我们只需从会话中获取ID,在DB中找到我们的用户,然后再次填写用户对象。 此处的目的是使内存占用空间尽可能小。

在可熔性示例之一中,脱水函数仅返回当前状态名称,而脱水函数将状态名称作为参数并将其设置为当前状态。 我认为完整状态对象在客户端和服务器上都可用。 因此,由于您不需要发送整个州,因此只发送州的名称。 脱水的功能很简单

State.dehydrate = function(){
    return this.currentStateName;
}
Molda answered 2020-07-08T06:57:07Z
translate from https://stackoverflow.com:/questions/29824908/what-does-dehydrate-and-rehydrate-stand-for-in-fluxible