Fluxible 中的“脱水”和“再水合”代表啥？

Posted 2023-02-22

【中文标题】Fluxible 中的“脱水”和“再水合”代表啥？

【英文标题】：What does « dehydrate » and « rehydrate » stand for in Fluxible?Fluxible 中的“脱水”和“再水合”代表什么？

【发布时间】：2015-07-01 17:23:59

【问题描述】：

我正在开发一个与 Fluxible 配合使用的最小应用程序。几乎所有事情看起来都很清楚，但只有一件事：脱水和再水合状态的概念。

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

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

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

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

【参考方案1】：

Dehydrate 是 serialize 的另一种说法，Rehydrate 表示反序列化。

膨胀 ==（重新）补水 == 反序列化

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

更新

如何使用序列化的示例：

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

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

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

【讨论】：

我喜欢你的评论，但很多人告诉我，我不应该以同样的方式看待它。有人可以解释为什么吗？用更传统的术语来思考这些范式确实很有帮助。

@MichaelVattuone 这实际上很有趣，我也提到过相同的 cmets，但没想过要问为什么。我现在也很好奇。

@MichaelVattuone 我添加了一个如何使用序列化的示例。希望对你有帮助

【参考方案2】：

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

这个场景中有两个关键组件：脱水的必胜客披萨和Black & Decker 保湿器。 暂时忽略我们还需要脱水机来完成比喻。

脱水的比萨饼是代表完整比萨饼所需的一切，但正如包装纸告诉我们的那样，“除非完全补充水分，否则不要食用”。服务端渲染的脱水披萨看起来很好吃，但实际上并没有完全吸引人。

您的应用既是给 McFly 奶奶使用的补水器、比萨饼和比萨盒说明。 Grandma McFly 是浏览器。当用户请求“半意大利辣香肠/半青椒”比萨页面时，后端会发送一个脱水比萨和一个 Black & Decker 水合器。 Grandma McFly（浏览器）仔细阅读所有说明并为用户补充比萨。这是一件非常好的事情，因为用户是个白痴，不知道也不关心含水比萨饼和脱水比萨饼之间的区别，就像小马蒂一样：

Marty Jr.: (o.s) 奶奶，你能把[脱水的披萨]塞进我嘴里吗？ （笑）

Marty：（o.s）你不要太聪明了！

到目前为止一切都很好，对吧？到目前为止的好处：

用户在第一次请求时就获得了整个（脱水的）比萨饼和水合器，而不是仅仅获得水合器并且必须进行（Web 服务 xhr）调用来订购比萨饼 网络爬虫是特别愚蠢的用户，他们通过查看冷冻比萨饼来获得所需的一切，并且不需要 McFly 奶奶阅读说明并通过为比萨饼补水使比萨饼互动

但是等等，还有更多！用户抓起一两片然后跑掉，留下剩下的披萨。发生这种情况时，McFly 奶奶从比萨盒指令中知道要保存修改后的比萨状态。她（客户端）将其放入脱水器（未显示）并将其送回橱柜（服务器）。如果并且当用户回来完成他们的半意大利辣香肠/半胡椒比萨饼时，整个脱水比萨饼/水合器/奶奶过程将再次发生，并且它将一如既往地新鲜，加上他们所做的更改。

让我们回顾一下：

脱水是提取应用程序的当前状态并将其序列化为对象。这可以在服务器端或客户端完成。 再水化是解释状态对象（通过脱水创建）并将应用程序渲染为美味的交互式比萨饼。 在任一方向传递脱水状态对象很有用：从服务器到客户端，或从客户端到服务器。

结束！除了不是真的。

让这个比喻起作用还有一个秘密的魔法部分，那就是每当我们给比萨加水时，我们实际上保持脱水的比萨完好无损。所以我们最终得到一个脱水比萨饼和一个水合比萨饼，然后我们在幕后根据需要同步它们。在 Flux 的情况下，这是通过许多商店组成您的应用程序来实现的。在 Redux 中，您只有一个*** Store，这可能更容易理解。

【讨论】：

我喜欢你的回答哈哈 :) 感谢您花时间写它！

【参考方案3】：

在 Fluxible 的上下文中，将应用程序脱水意味着将其状态提取到一个对象中。再水化您的应用程序是使用相同的对象在您的应用程序中reinject 状态。表示应用程序状态的对象应该是可序列化的，以便通过网络发送。

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

【讨论】：

更好的问题是“为什么 js 社区要为已经建立的概念编造新的行话？”