Skip to main content

Jotai

  • pmndrs/jotai 是什么？
    • 7.1kB/2.7kB
    • 大状态拆分小(原子/atom)状态 - 原子状态更利于复用和减小变化影响范围
    • 核心接口 atom, Provider, useAtom, Store
      • jotai/utils 包含其他工具 atom
      • jotai/集成 包含与其他库集成的逻辑 - zustand, xstate, react-query, redux, immer, valtio
      • jotai/devtools - Redux devtool 集成 - useAtomDevtools(tasksAtom) - 依赖 debugLabel
    • 类似 Recoli 但使用上更简单
    • 替代 useState+useContext
    • Suspense
    • vs Recoil
      • jotai: 最小化接口, 不使用字符串标识, TypeScript
        • Jotai advantages over Recoil #420
      • recoil: string key, 序列化支持更好
    • vs zustand
  • 参考 
# 推荐 focusAtom
npm install jotai optics-ts jotai-optics
tip
  • jotai 提供原子能力，可以与现有状态管理集成使用 - zustand, valtio, xstate, redux, urql
  • 状态拆分 splitAtom, selectAtom, focusAtom optics-ts 9kB/3kB
  • atom 和 async/await 一样有传染性
    • 因此 jotai 提供非常多的集成和辅助
  • atom vs valtio
    • valtio
      • 基于代理，不能随便传递 - 接收方明确知道是 代理
      • 更容易 select 部分状态
    • atom
      • 有专门的 wrapper 类型 - 类似 Promise，接收方肯定知道是 atom
      • 侵入性更大，但更不容易出错，可以直接传递使用
      • 依赖 focusAtom、splitAtom、selectAtom 来拆分状态
  • Store 为上下文
    • 可以在非 react 环境使用
    • .get,.set,.sub

utils​

  • storage - import { atomWithStorage, RESET } from 'jotai/utils'
  • SSR - import { useHydrateAtoms } from 'jotai/utils'
  • Async - import { loadable, atomWithObservable, unwrap } from "jotai/utils"
    • loadable - 避免 Suspense
  • reset - import { atomWithReset, useResetAtom, RESET } from 'jotai/utils'
    • 重置为之前状态
  • Family - import { atomFamily } from 'jotai/utils'
    • 创建 factory
    • 支持自定义 equal
  • callback - import { useAtomCallback } from 'jotai/utils'
    • 动态和 atom 交互，而不是预定义的 atom
  • reducer - import { atomWithReducer } from 'jotai/utils'
  • selectAtom
    • 获取部分状态
    • 监听部分变化
  • splitAtom
    • array -> item
function selectAtom<Value, Slice>(
  anAtom: Atom<Value>,
  selector: (v: Value, prevSlice?: Slice) => Slice,
  equalityFn: (a: Slice, b: Slice) => boolean = Object.is
): Atom<Slice>

集成​

  • jotai-trpc - 使用 Vanilla 客户端
    • atomWithQuery
    • atomWithMutation
    • atomWithSubscription
  • jotai-tanstack-query
    • atomsWithQuery
    • atomsWithInfiniteQuery
    • atomsWithMutation
  • jotai-urql
    • atomWithQuery
    • atomWithMutation
    • atomWithSubscription
  • jotai-immer
  • jotai-xstate
  • jotai-location
    • window.location
  • jotai-cache
    • read-only atom with cache
    • 基于状态 memo
  • jotai-molecules
  • jotai-optics
    • 获取部分 state
  • jotai-redux
  • jotai-relay
  • jotai-valtio
    • atomWithProxy
      • valtio -> atom
  • jotai-zustand
    • atomWithStore
  • @swc-jotai/react-refresh
  • @swc-jotai/debug-label
  • jotai/babel/plugin-react-refresh
  • jotai/babel/plugin-debug-label
  • jotai/babel/preset
  • jotai-devtools
    • useAtomsDebugValue
    • useAtomDevtools
    • useAtomsDevtools
    • useAtomsSnapshot
    • useGotoAtomsSnapshot