Reactjs React简单的全局实体缓存，而不是Flux/React/etc

我正在写一个小项目

在我的服务器上，我有被

uuid

-s引用的实体 （内-s）

为了“有趣”，我不想使用flux/redux架构，但仍然在客户端上使用React（使用）

我想做的是使用一个简单的缓存，例如：

• 当React

  UserDisplayComponent

  希望使用

  uuid=0003

• 然后

  render（）

  方法调用

  Cache

  （作为

  prop

  传入）
• 让我们假设这是

  UserDisplayComponent

  第一次请求这个特定的

  User

  （使用

  uuid=0003

  ）而

  缓存还没有它

• 然后，

  Cache

  进行

  AjaxCall

  从服务器获取

  用户

• 当

  AjaxCall

  返回

  Cache

  时，触发

  re render

• 但是！现在，当组件从

  缓存中请求
  用户
  时，它会立即从
  缓存中获取
  用户
  实体
  ，并且不会触发
  AjaxCall

我希望实现这一点的方式如下：

• 我启动一个

  render（）

• render（）中的“stuff”询问
  缓存中所有类型的
  实体

• 缓存

  返回

  加载

  或

  实体

  本身
• 渲染结束时，

  缓存

  将所有

  AjaxRequest

  -s发送到服务器，并等待它们全部返回
• 一旦所有

  AjaxRequests

  都返回了（为了简单起见，假设它们返回了），

  Cache

  会触发一个“

  re-render（）

  ”，现在之前请求的所有实体都会立即由

  Cache

  提供
• 当然，如果我加载一个

  实体，例如
  案例类UserList（ul:List[Ref[User]]）
  类型，那么新到达的
  实体将触发
  呈现（）
  ，以获取更多的
  实体
  -s。但是现在我们不要担心这个

问题:

1） 如果我以这种方式处理国家事务，我真的做错了什么吗

2） 是否已有解决方案

我环顾四周，但一切都是FLUX/REDUX等。。。沿着这些路线…-我想避免这样做，因为：

• “乐趣”
• 好奇心
• 探索
• 玩弄
• 我认为这个简单的缓存对于我的用例来说会更简单，因为我想以一种简单的方式将基于“REF”的“域模型”转移到客户机上：就像客户机在服务器上一样，网络将无限快且零延迟（这是缓存将模拟的）

---

考虑构建丰富的动态web UI需要解决哪些问题，以及哪些库/层通常为您处理这些问题

1。DOM事件（单击等）需要触发状态更改

这是相对容易的。DOM节点公开了基于回调的侦听器API，该API可以直接适应任何体系结构

2。状态更改需要触发对DOM节点的更新

这更为棘手，因为它需要以一种可维护的方式高效地进行。您不希望在组件状态发生变化时从头开始重新呈现整个组件，也不希望编写大量jquery风格的意大利面代码来手动更新DOM，因为即使在运行时效率很高，也很容易出错

这个问题主要是React这样的库存在的原因，它们将其抽象到虚拟DOM后面。但您也可以像我自己的库一样，在没有虚拟DOM的情况下将其抽象出来

放弃这个问题的库解决方案只适用于更简单的应用程序

3。组件应该能够读取/写入全局状态

这是flux/redux解决的部分。具体来说，这些都是问题1和问题2，除了适用于全局状态而不是组件状态

4。缓存

---

缓存很难，因为缓存需要在某个点上失效，而不是上面提到的所有东西

Flux/redux对此毫无帮助。其中一个确实有用的库是，它的工作原理与您提出的解决方案非常相似，只是更加详细，并且位于React和GraphQL之上。阅读其文档将帮助您解决问题。如果您不需要整个React/GraphQL包，但您需要了解现有技术，那么您肯定可以在plain Scala.js中实现中继功能的一小部分

5。序列化和类型安全性

这是列表中唯一一个与Scala.js相关的问题，而不是Javascript和SPA

Scala对象需要序列化才能在网络上传输。转换为JSON、protobufs或其他任何格式，但您需要一个不涉及容易出错的手动工作的系统。有许多Scala.js库可以解决这个问题，如upickle、Autowire、endpoints、sloth等。关键字：“Scala JSON库”或“Scala类型安全RPC”，具体取决于您需要哪种解决方案

---

我希望这些原则足以作为答案。当您理解这些问题时，您的解决方案是否适用于给定的用例应该是显而易见的。实际上，您没有描述您的解决方案如何解决问题2、4和5。您可以使用我提到的一些库，或者使用类似的想法/算法实现您自己的解决方案

---

在