将异步(通过网络)加载到原子家庭/选择家庭反冲组件的适当方式是什么？

Question

我正在研究如何在我的应用程序中使用RecoilJS，我喜欢atomFamily的概念--这似乎是一个很好的方法，可以在保持应用程序性能的同时跟踪列表中的各个项目，因为每个项目的更新都不会强制刷新整个列表。

我希望以异步的方式从远程服务器加载一组数据，比如todo列表中的项(给出一个规范的示例)，然后初始化atomFamily并从这些项中的每一项创建一个react组件。

我的第一个想法是创建一个useEffect钩子。在它中，我获取数据，然后运行一个for循环，并调用atomFamily为每个项目创建原子。

但后来我开始阅读关于selectorFamily的文章--听起来这可能是正确的方法？此外，原子效应(不稳定)看起来可能是正确的方法，而不是使用普通的useEffect钩子？现在我对这里的正确方式感到困惑，我还没有在互联网上找到很多关于这方面的信息。

请你指出正确的方向好吗？如何正确地加载数据，然后将其拉到后坐力系统中？AtomFamily，selectorFamily？我在这里走的路对吗？

提前感谢你的帮助，

格雷格

Answer 1

我在后坐力Github页上发布了这个问题，得到了几个高质量的答案。非常感谢BenjaBobs和drarmstr的帮助：

BenjaBobs写道：

你有几个选择： 获取项数组并将其存储在一个原子中，并使用selectorFamily访问该原子中的各个项。如果您需要在某个地方显示列表，这可能是一个很好的选择，因为您现在有了要迭代的数组版本。 获取数组并对它们进行迭代，并将每个数组放入自己的atomFamily成员中。 使用selectorFamily，此时只获取一个。 对第一个和第三个选项进行组合，获取一个ids列表，并将它们放入一个原子中，然后使用selectorFamily来延迟获取。 编辑:这是我爱好项目中使用我提到的第四种方法https://github.com/BenjaBobs/HotsTools/blob/master/src/api/state/heroes.ts#L5-L129的一种状态

Drarmstr指出：

使用selectorFamily()可以进行只读查询。使用atomFamily()可以允许加载初始值，但随后允许本地突变。使用原子效应可以使您双向同步可变数据. 还请注意一些基于选择如何加载数据的结果。如果使用useEffect()或某种异步机制将初始值加载到atomFamily()：那么如果在加载数据之前读取原子，那么它们将使用默认的原子值。如果使用selectorFamily()来获取它们，使用带有selectorFamily()的atomFamily()作为缺省值来获取初始值，或者通过原子效应中的承诺来初始化值，那么在加载初始值时，反冲状态可以是“挂起”。这可以通过反应悬念自动管理，也可以通过使用可加载物显式管理。

我接着提出以下问题：

@drarmstr -让我们假设我想使用一个默认承诺的atom()来获取我的项目列表。接下来，我想迭代列表项并创建单独的原子--这是练习的全部要点。这一切都应该在同一个承诺内完成吗？

dramstr回答说：

如果您使用具有默认承诺的atom()模式来允许具有远程查询中的缺省值的本地可变状态，则处理实际项状态本身的等效方法是对项使用atomFamily()，并提供一个selectorFamily()默认值，它使用承诺查询单个项的缺省值。例如：

 const itemsState = atom({
    key: 'Items',
    default: fetch(items...),
 });
 
 const itemState = atomFamiliy({   key: 'Item',   default:
 selectorFamily({
     key: 'Item/Default',
     get: id => () => fetch(id...),   
    }),
 });

感谢那些对此做出回应的人，这对我理解后坐力的过程很有帮助。