Jotai

状態

原始和灵活的 React 状态管理

tRPC

您可以将 Jotai 与 tRPC 一起使用。

安装

您必须安装 jotai-trpc、@trpc/client 和 @trpc/server 才能使用集成。

yarn add jotai-trpc @trpc/client @trpc/server

使用

import { createTRPCJotai } from "jotai-trpc";

const trpc = createTRPCJotai<MyRouter>({
  links: [
    httpLink({
      url: myUrl,
    }),
  ],
});

const idAtom = atom("foo");
const queryAtom = trpc.bar.baz.atomWithQuery((get) => get(idAtom));

atomWithQuery

...atomWithQuery 使用“查询”创建一个新原子。它在内部使用 Vanilla Client 的 ...query 过程。

import { atom, useAtom } from "jotai";
import { httpLink } from "@trpc/client";
import { createTRPCJotai } from "jotai-trpc";
import { trpcPokemonUrl } from "trpc-pokemon";
import type { PokemonRouter } from "trpc-pokemon";

const trpc = createTRPCJotai<PokemonRouter>({
  links: [
    httpLink({
      url: trpcPokemonUrl,
    }),
  ],
});

const NAMES = [
  "bulbasaur",
  "ivysaur",
  "venusaur",
  "charmander",
  "charmeleon",
  "charizard",
  "squirtle",
  "wartortle",
  "blastoise",
];

const nameAtom = atom(NAMES[0]);

const pokemonAtom = trpc.pokemon.byId.atomWithQuery((get) => get(nameAtom));

const Pokemon = () => {
  const [data] = useAtom(pokemonAtom);
  return (
    <div>
      <div>ID: {data.id}</div>
      <div>Height: {data.height}</div>
      <div>Weight: {data.weight}</div>
    </div>
  );
};

示例

atomWithMutation

...atomWithMutation 创建一个带有“mutate”的新原子。它在内部使用 Vanilla Client 的 ...mutate 过程。

FIXME: 添加代码示例和 codesandbox

atomWithSubscription

...atomWithSubscription 创建一个带有“订阅”的新原子。它在内部使用 Vanilla Client 的 ...subscribe 过程。