Jotai

状態

原始和灵活的 React 状态管理

Location

为了处理 window.location，我们有一些创建原子的函数。

安装

您必须安装 jotai-location 才能使用此功能。

yarn add jotai-location

atomWithLocation

atomWithLocation(options): PrimitiveAtom

atomWithLocation 创建一个链接到 window.location 的新原子。

参数

options（可选）：自定义原子行为的选项对象

Options

preloaded（可选）：预加载位置值以避免在初始化时获取位置。

replace（可选）：一个布尔值，指示使用 replaceState 而不是 pushState。

getLocation（可选）：获取位置值的自定义函数。

applyLocation（可选）：用于设置位置值的自定义函数。

subscribe（可选）：订阅位置变化的自定义函数。

示例

import { useAtom } from "jotai";
import { atomWithLocation } from "jotai-location";

const locationAtom = atomWithLocation();

const App = () => {
  const [loc, setLoc] = useAtom(locationAtom);
  return (
    <ul>
      <li>
        <button
          style={{
            fontWeight: loc.pathname === "/" ? "bold" : "normal",
          }}
          onClick={() => setLoc((prev) => ({ ...prev, pathname: "/" }))}
        >
          Home
        </button>
      </li>
      <li>
        <button
          style={{
            fontWeight:
              loc.pathname === "/foo" && !loc.searchParams?.get("bar")
                ? "bold"
                : "normal",
          }}
          onClick={() =>
            setLoc((prev) => ({
              ...prev,
              pathname: "/foo",
              searchParams: new URLSearchParams(),
            }))
          }
        >
          Foo
        </button>
      </li>
      <li>
        <button
          style={{
            fontWeight:
              loc.pathname === "/foo" && loc.searchParams?.get("bar") === "1"
                ? "bold"
                : "normal",
          }}
          onClick={() =>
            setLoc((prev) => ({
              ...prev,
              pathname: "/foo",
              searchParams: new URLSearchParams([["bar", "1"]]),
            }))
          }
        >
          Foo?bar=1
        </button>
      </li>
    </ul>
  );
};

Codesandbox

atomWithHash

atomWithHash(key, initialValue, options): PrimitiveAtom

这将创建一个与 URL 哈希连接的新原子。哈希必须采用 URLSearchParams 格式。这是双向绑定：更改原子值将更改哈希，更改哈希将更改原子值。此函数仅适用于 DOM。

参数

key（必需）：与 localStorage、sessionStorage 或 AsyncStorage 同步状态时用作键的唯一字符串

initialValue（必填）：原子的初始值

options（可选）：自定义原子行为的选项对象

Options

serialize（可选）：将原子值序列化为散列的自定义函数。默认为 JSON.stringify。

deserialize（可选）：将散列反序列化为原子值的自定义函数。默认为 JSON.parse。

delayInit（可选）：将原子的初始化延迟到调用 onMount 时。请参阅 #739。默认为 false。

replaceState（可选）：当原子值改变时，替换当前的历史条目，而不是添加新的。请参阅 #660。默认为 false。

subscribe（可选）：自定义哈希变化订阅函数

示例

import { useAtom } from "jotai";
import { atomWithHash } from "jotai-location";

const countAtom = atomWithHash("count", 1);

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <div>count: {count}</div>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </div>
  );
};

Codesandbox

删除项目

删除项的用法请参考atomWithStorage。

JotaiJotai

Location

Jotai