Jotai

React 原始而灵活的状态管理

Location

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

安装

你需要安装 jotai-location 才能使用此功能。

npm i jotai-location

atomWithLocation

atomWithLocation(options): PrimitiveAtom

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

参数

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>
  )
}

代码沙箱

atomWithHash

atomWithHash(key, initialValue, options): PrimitiveAtom

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

参数

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

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

options（可选）：一个选项对象，用于自定义原子的行为

选项

serialize（可选）：一个自定义函数，用于将原子值序列化为哈希。默认为 JSON.stringify。

deserialize（可选）：一个自定义函数，用于将哈希反序列化为原子值。默认为 JSON.parse。

subscribe（可选）：自定义哈希更改订阅函数

setHash（可选）：replaceState 或一个自定义函数，描述浏览器端如何更新哈希。默认为通过 window.location.hash = searchParams 将新条目推送到历史记录（jotai-location#4）

示例

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>
  )
}

代码沙箱

删除项目

请参考 atomWithStorage 关于删除项目的使用方法。

JotaiJotai

Location

Jotai