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

Question

我有一个 api 请求，我想将响应存储在 Recoil 原子中。
我正在尝试找出这样做的最佳方法。
问题是我的选择器没有依赖性（原子），因为我的请求没有参数：

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”。

我错过了什么？

Answer 1

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

我想你缺少道具， findConnections 是您响应请求的原子状态，真的吗？或函数 ?

Answer 2

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

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

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

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

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

Creating simple slice of state with recoil

javascript

reactjs

recoiljs