将异步通过网络加载到 atomFamily/selectorFamily 反冲组件的合适方法是什么?

问题描述

我正在研究如何在我的应用程序中使用 RecoilJS,我喜欢 atomFamily 的概念 - 由于每个项目的更新,这似乎是跟踪列表中单个项目同时保持应用程序性能的好方法不强制刷新整个列表。

我想从远程服务器以异步方式加载一组数据,假设待办事项列表中的项目(举一个规范的例子),然后初始化 atomFamily 并从这些项目中的每一个创建一个反应组件。

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

但后来我开始阅读有关 selectorFamily 的内容 - 听起来这可能是正确的方法?此外,还有原子效果(不稳定)看起来它们可能是执行此操作的正确方法,而不是使用正常的 useEffect 钩子?现在我对在这里进行的正确方法感到困惑,而且我还没有在互联网上找到很多关于此的信息。

你能指点我正确的方向吗?加载数据然后将其拉入 Recoil 系统的合适方法是什么? AtomFamily、selectorFamily?我是否在正确的轨道上?

预先感谢您的帮助,

格雷格

解决方法

我在 Recoil Github page 上发布了这个问题,并得到了几个高质量的答案。非常感谢 BenjaBobs 和 drarmstr 的帮助:

BenjaBobs 写道:

您有几个选择:

获取项目数组并存储在一个原子中,然后使用 selectorFamily 访问该原子中的单个项目。如果你需要 在某处显示列表,这可能是一个不错的选择,因为您现在 有一个数组版本来迭代

获取数组并迭代它们并将每个放入它自己的 atomFamily 成员。

一次只获取一个,使用 selectorFamily。

结合第一个和第三个选项并获取一个列表 ids 并将它们放入一个 atom 中,然后使用一个 selectorFamily 来获取 懒洋洋的。

编辑:这是我的爱好项目中的一个状态,它使用了第四个 我提到的方法 https://github.com/BenjaBobs/HotsTools/blob/master/src/api/state/heroes.ts#L5-L129

Drarmstr 注释:

使用 selectorFamily() 适用于只读查询。使用 atomFamily() 可以允许您加载初始值,但随后允许 局部突变。使用原子效应可以让你双向 同步可变数据。

另请注意根据您选择加载您的方式的一些后果 数据。如果您使用 useEffect() 或某种异步机制来加载初始 值到 atomFamily() 中:然后如果原子在 正在加载的数据将使用默认原子值。如果你使用一个 selectorFamily() 来获取它们,使用 atomFamily() 和 selectorFamily() 作为默认获取初始值,或初始化 通过 Promise 在原子效果中的值,然后后坐力状态可以 在加载初始值时处于“待定”状态。这可以管理 通过 React Suspense 自动或通过使用显式管理 加载项。

我跟进了以下问题:

@drarmstr - 假设我想使用带有默认值的 atom() 承诺获取我的物品清单。接下来,我想遍历 列出项目并创建单个原子 - 整个过程的重点 锻炼。所有这些都应该在同一个 Promise 中完成吗?

dramstr 回复:

如果你使用 atom() 的模式和 Promise 默认为 允许使用来自远程查询的默认值的本地可变状态, 然后相当于处理实际项目状态本身 将是对项目使用 atomFamily() 并提供默认值 那是一个 selectorFamily(),它使用 Promise 来查询默认值 对于单个项目。例如:

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

非常感谢回复的人,这对我了解 Recoil 的过程很有帮助。

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...