一种在 React 应用程序中处理依赖项解析和乐观更新的方法

Question

在对象具有许多复杂关系的体系结构中，有哪些可维护的处理方法

解决依赖关系
乐观更新

在 React 应用程序中？

例如，给定这种模式：

```
type Foo {
  ...
  otherFooID: String,
  bars: List<Bar>
}

type Bar {
  ...
  bizID: String,
}

type Biz {
  ...
}
```

用户可能想要保存以下内容 ->

firstBiz = Biz();
secondBiz = Biz();
firstFoo = Foo({bars: [Bar({biz: firstBiz})]
secondFoo = Foo({bars: [Bar({biz: secondBiz})] otherFooId: firstFooId.id})

第一个问题：选择真实 ID

上面的第一个问题是 id 正确。即为了保存 secondFoo，它需要知道 firstFoo 的实际 ID。

为了解决这个问题，我们可以做出权衡，让客户端选择 id，使用类似 uuid 的东西。我没有看到这有什么严重的错误，所以我们可以说这可行

问题二：按顺序保存

即使我们从前端确定了id，服务器仍然需要按顺序接收这些保存请求。

```
- save firstFoo 
// okay. now firstFoo.id is valid
- save secondFoo
// okay, it was able to resolve otherFooID to firstFoo
```

这里的原因是后端必须保证被引用的任何id都是有效的。

```
- save secondFoo
// backend throws an error otherFooId is invalid
- save firstfoo
// okay
```

我不确定解决这个问题的最佳方法是什么

想到的当前方法

具有自定义操作，通过承诺进行协调

save(biz).then(_ => save(Bar).then(_ => save(firstFoo)).then(_ => save(second)

缺点是比较复杂，而且这种组合的数量会不断增加

创建待定/解决助手

const pending = {}
const resolve = (obj, refFn) => {
  return Promise.all(obj, refFn(obj));
}
const fooRefs = (foo) => {
  return foo.bars.map(bar => bar.id).concat(foo.otherFooId);
}

pending[firstFoo].id = resolve(firstFoo, fooRefs).then(_ => save(firstFoo))

```

2. 的问题在于，如果我们忘记解决或添加到挂起，它很容易导致一堆错误。

可能的解决方案

看来 Relay 或 Om next 可以解决这些问题，但我想要功率较低的东西。也许某些东西可以与 redux 一起使用，或者它可能是我缺少的一些概念。

非常感谢的想法

Answer 1

我有一个这样的系统的JS/PHP实现我的方法是使用参考系统在客户端和服务器上序列化记录

例如，未保存的 Foo1 具有 GUID eeffa3，第二个 Foo 将其 id 键引用为 {otherFooId: '@Foo#eeffa3[id]' }

同样，您可以像这样引用整个对象

Foo#eefa3:{bars['@Baz#ffg4', '@Baz#ffg5']}

现在客户端序列化程序将像这样构建关系树和模型属性

{
modelsToSave:[

  'Foo#effe3':{
    attribs:{name:'John', title:'Mr.'},
    relations:{bars:['@Bar#ffg4']}
  },
  'Bar#ffg4':{
    attribs:{id:5}
    relations:{parentFoo:'@Foo#effe3'}
  },
]
}

正如您在本例中看到的那样，我在纯 JSON.

中描述了未保存对象之间的循环关系

这里的关键是将这些 "record" 对象保存在客户端内存中并且永远不要改变它们的 GUID

服务器可以确定保存顺序，先保存没有 "parent" 依赖关系的记录，然后保存依赖那些父项的记录

保存后，服务器会return相同的引用映射，但现在属性也会包含主键和外键

JS 遍历接收到的地图两次（第一遍只是更新服务器接收到的属性，第二遍替换记录引用和对真实记录和属性的属性引用）。

所以有 2 种引用记录的机制，客户端 GUID 和服务器端 PK

接收服务器时JSON，您将您的 GUID 与服务器主键匹配

一种在 React 应用程序中处理依赖项解析和乐观更新的方法

An approach to deal with dependency resolution and optimistic updates in react applications

frontend

relay

reactjs

redux

om-next

第一个问题：选择真实 ID

问题二：按顺序保存

可能的解决方案