使用反冲创建简单的状态切片

问题描述

我有一个 api 请求，我喜欢将响应存储在 Recoil atom 中。
我想弄清楚这样做的最佳方法是什么。
问题是我的选择器没有依赖项（原子），因为我的请求没有参数：

const connectionsQuery = selector({
  key: "Connections",get: async () => {
    const connections = await findConnections();
    return connections;
  },});

当我执行以下操作时，出现信息性错误：

这是我使用选择器的方式：

function DashboardLayout() {
  const classes = useStyles();
  const [isMobileNavOpen,setMobileNavOpen] = useState(false);
  console.log(222);
  const connections = useRecoilValue(connectionsQuery);
  console.log(333);
  ...
  ...

'222' 控制台已记录，但 '333' 从未被记录。

我错过了什么？

解决方法

你必须用 Suspense 包装你的组件。 await使用选择器意味着依赖于该选择器值的组件将暂停渲染，直到有一个值，因为 Recoil 在内部会抛出一个承诺（这是暂停背后的整个想法在 React 中）。

因此，要使其工作，请使用 Suspense 组件包装您的 DashboardLayout 组件：

<React.Suspense fallback={<div>loading...</div>}>
  <DashboardLayout/>
</React.Suspense>

这也在 recoil docs 中说明。 要了解有关并发模式和悬念的更多信息，您应该阅读官方 react docs 以了解其背后的机制。

,

const connectionsQuery = selector({
     key: "Connections",get: async ({ get }) => {
          const connections = await get(findConnections);
          return connections;
     },});

我认为您缺少获取道具， findConnections 是您的响应请求的原子状态，真的吗？还是函数？