"脱水"和"再水化"代表什么是Fluxible？

Question

我正在开发一款与助焊剂配合使用的最小应用程序.几乎所有东西看起来都很清楚但有一点:脱水和再水化状态的概念.

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

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

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

如果你能用"更简单的单词"告诉我它意味着什么,我将非常感激.

Answer 1

上面的答案很棒,但我想我们仍然可以用披萨来解释这个比喻.从Back to The Future 2中考虑这个场景:

这个场景有两个关键组成部分:脱水的必胜客比萨饼和Black&Decker保湿剂.暂时忽略我们还需要脱水剂来完成这个比喻.

脱水比萨饼是表示完整比萨饼所必需的一切,但正如包装纸告诉我们的那样,"除非完全重新浇水,否则不要消费".由服务器呈现的脱水比萨饼看起来很美味,但实际上并不完全吸引人.

你的应用程序是Grandma McFly的保湿,披萨和披萨盒说明.奶奶麦克弗利是浏览器.当用户请求"半意大利辣香肠/半青椒"比萨饼页面时,后端发送脱水比萨饼和Black&Decker保湿剂.奶奶麦克弗利(浏览器)仔细阅读所有说明并为用户保存比萨饼.这是一个非常好的事情,因为用户是一个白痴,不知道或不关心水合和脱水比萨饼之间的区别,就像Marty Jr.:

Marty Jr.:(os)奶奶,你能把[脱水披萨]塞进嘴里吗？(笑)

马蒂:(os)你不是一个自作聪明!

到目前为止一切都那么好吧？到目前为止的好处:

• 用户在第一次请求时获得整个(脱水)比萨饼和保湿剂,而不是仅仅获取保湿剂并且必须进行(网络服务xhr)电话订购比萨饼
• 网络爬虫是特别愚蠢的用户,他们通过查看冷冻比萨获得他们所需的一切,并且不需要奶奶McFly阅读说明并通过保湿使披萨互动

但等等,还有更多!用户抓住一两片然后跑掉,留下剩下的披萨.当发生这种情况时,奶奶McFly从披萨盒说明中了解到保存修改后的披萨状态.她(客户端)将它放入脱水器(未显示)并将其送回橱柜(服务器).如果用户回来完成他们的半意大利辣香肠/半胡椒披萨,整个脱水披萨/保湿/奶奶过程将再次发生,它将是新鲜的,以及他们所做的改变.

让我们来复习:

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

结束!除了不是真的.

还有一个神秘的魔法部分可以让这个比喻起作用,这就是每当我们给比萨饼保湿时,我们实际上保持脱水比萨完好无损.因此,我们结束了脱水比萨饼和水合比萨饼,然后我们在幕后必要时同步它们.在Flux的情况下,这是通过许多商店组成您的应用程序.在Redux中,您只有一个顶级商店,可以更容易理解.

Answer 2

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

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

Answer 3

脱水是序列化的另一个词,Rehydrate意味着反序列化.

膨胀==(重新)保湿==反序列化

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

更新

如何使用序列化的示例:

假设我们有一个用户对象,并希望在请求之间保留当前登录用户的引用.我们可以通过简单地获取其ID并将其保存到会话中来序列化用户.那将是用户对象的序列化或脱水.为了补充或反序列化,我们只需从会话中获取id,在DB中找到我们的用户并再次填写用户对象.这里的目的是尽可能降低内存占用.

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

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