“脱水”和“补水”在stream动性中代表什么?

我正在开发一个最基本的应用程序,它可以帮助你。 几乎所有的事情都看起来很清楚,但有一点是:脱水和补水状态的概念。

我已经了解到,在客户端和服务器之间同步存储需要什么,但是我不知道为什么。 这条线对我来说很不清楚:

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

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

如果你能用“简单的话”来告诉我这意味着什么,我将不胜感激。

在Fluxible的背景下,使应用程序脱水意味着其状态提取到一个对象中。 重新水化你的应用程序是使用相同的对象来重新注入应用程序中的状态。 表示应用程序状态的对象应该是可序列化的,以便通过networking发送。

假设我想在服务器上预渲染我的应用程序,向客户端提供html,然后在客户端重新渲染我的应用程序。 如果我的应用程序只包含静态数据,这将是微不足道的。 但是,我的应用程序是有状态的 :它在初始化渲染之前从我的API中检索数据并将其存储。 通过提取服务器上的应用程序的状态,将其与HTML一起发送,然后将其重新注册到客户端上,避免向我的API发出两个请求。

上面的答案很好,但我认为我们仍然可以用比萨饼来解释这个比喻。 从“回到未来”考虑这个场景2:

回到未来2比萨保湿

在这个场景中有两个关键组成部分: 脱水的必胜客比萨黑&Decker水合物忽略了一会儿,我们还需要脱水器来完成比喻。

脱水的比萨饼是代表一个完整比萨饼所需的一切,但正如包装告诉我们的,“除非完全再饮用,否则不要消费”。 由服务器呈现的脱水比萨,看起来很好吃,但实际上并没有完全参与其中。

你的应用程序是奶奶,比萨饼和披萨盒说明奶奶麦弗利。 奶奶McFly是浏览器 。 当用户请求“半意大利辣香肠/半青椒”比萨饼页面时,后端发送脱水比萨饼和黑德克尔水合器。 奶奶McFly(浏览器)仔细阅读所有的说明,并为用户补充披萨。 这是一个非常好的事情,因为用户是一个白痴,不知道或关心水分和脱水比萨之间的差异,就像马蒂:

Marty Jr .:(os)奶奶,你可以把(脱水比萨饼)放在我口中吗? (笑)

Marty:(os)你不是一个聪明的屁股!

到目前为止这么好,对吧? 到目前为止受益:

  • 用户在第一次请求时获得整个(脱水的)比萨饼和水化器,而不是仅仅获得水化器,并且必须进行(web服务xhr)调用来订购披萨
  • networking爬虫是特别愚蠢的用户,他们从冷冻比萨饼中获得所需的一切,而且不需要奶奶姥姥来阅读说明书并通过保湿来交互比萨饼

但是等等,还有更多! 用户抓了一两片,然后跑掉,剩下的比萨饼。 当发生这种情况时,奶奶McFly从披萨盒知道如何保存修改后的匹萨状态。 她(客户端)将其放入干燥器(未示出)中,并将其发送回橱柜(服务器)。 如果当用户回来完成他们的半意大利辣香肠/半胡椒披萨,整个脱水披萨/水化器/奶奶过程将再次发生,并且将会像以前一样新鲜,再加上他们所做的改变。

我们来复习:

  • 脱水是提取应用程序的当前状态并将其序列化为一个对象。 这可以在服务器端或客户端完成。
  • 补充水分是解释状态对象(通过脱水创build),并将应用程序变成美味的交互式比萨饼。
  • 任何一个方向上传递脱水的状态对象是有用的:从服务器到客户端,或者客户端到服务器。

结束! 除非不是。

让这个比喻起作用还有一个秘密的部分,那就是每当我们为比萨提供水分的时候,我们实际上就保持了脱水比萨的完整 。 所以我们拿出一个脱水比萨饼和一个水合比萨饼,然后我们在幕后随时同步。 在Flux的情况下,这是通过许多商店组成你的应用程序。 在Redux中,你只需要一个顶层的商店,可以更容易理解。

脱水是另一个字序列化和补水意味着反序列化。

膨胀==(再)保湿==反序列化

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

更新

如何使用序列化的示例:

假设我们有一个用户对象,并希望在请求之间保留当前login用户的引用。 我们可以通过简单地将它的id序列化并保存到会话中。 这将是用户对象的序列化或脱水。 要保存或反序列化,我们只需从会话中获取id,在数据库中查找我们的用户并再次填入用户对象。 这里的目的是保持内存占用尽可能低。

在通量的例子之一中,脱水函数只是返回当前状态名称,水合物函数将状态名称作为参数并将其设置为当前状态。 我认为完整的状态对象可以在客户端以及服务器上使用。 所以既然你不需要发送整个状态,你只能发送状态的名字。 脱水的function就像

 State.dehydrate = function(){ return this.currentStateName; } 
Interesting Posts