Jotai状态持久化完全指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00972/article/details/148362786

Jotai状态持久化完全指南

jotai 👻 Primitive and flexible state management for React 项目地址: https://gitcode.com/gh_mirrors/jo/jotai

什么是状态持久化

在React应用开发中，状态管理是核心问题之一。Jotai作为轻量级的状态管理库，提供了简洁的原子化状态管理方案。而状态持久化指的是将应用的状态保存在持久化存储中（如localStorage、sessionStorage等），这样在页面刷新或重新访问时能够恢复之前的状态，提供更好的用户体验。

Jotai内置持久化方案

Jotai提供了atomWithStorage工具函数，它开箱即用地支持多种存储方式：

localStorage：长期保存，直到手动清除
sessionStorage：仅在当前会话有效
AsyncStorage：React Native环境使用
URL hash：将状态保存在URL中

基础持久化实现

简单localStorage实现

const strAtom = atom(localStorage.getItem('myKey') ?? 'foo')

const strAtomWithPersistence = atom(
  (get) => get(strAtom),
  (get, set, newStr) => {
    set(strAtom, newStr)
    localStorage.setItem('myKey', newStr)
  }
)

这种实现简单直接，但缺乏对JSON数据的处理能力。

增强版localStorage实现

const atomWithLocalStorage = (key, initialValue) => {
  const getInitialValue = () => {
    const item = localStorage.getItem(key)
    if (item !== null) {
      return JSON.parse(item)
    }
    return initialValue
  }
  
  const baseAtom = atom(getInitialValue())
  const derivedAtom = atom(
    (get) => get(baseAtom),
    (get, set, update) => {
      const nextValue = 
        typeof update === 'function' ? update(get(baseAtom)) : update
      set(baseAtom, nextValue)
      localStorage.setItem(key, JSON.stringify(nextValue))
    }
  )
  return derivedAtom
}

这个实现增加了JSON序列化/反序列化功能，并支持函数式更新，更适用于实际项目。

异步存储实现

对于React Native或需要异步操作的场景，可以使用以下实现：

const atomWithAsyncStorage = (key, initialValue) => {
  const baseAtom = atom(initialValue)
  baseAtom.onMount = (setValue) => {
    (async () => {
      const item = await AsyncStorage.getItem(key)
      setValue(JSON.parse(item))
    })()
  }
  
  const derivedAtom = atom(
    (get) => get(baseAtom),
    (get, set, update) => {
      const nextValue = 
        typeof update === 'function' ? update(get(baseAtom)) : update
      set(baseAtom, nextValue)
      AsyncStorage.setItem(key, JSON.stringify(nextValue))
    }
  )
  return derivedAtom
}

注意这里使用了onMount生命周期，确保组件挂载时从存储中加载数据。

使用内置工具简化实现

Jotai提供了更简洁的实现方式：

import { atomWithStorage, createJSONStorage } from 'jotai/utils'

// 使用sessionStorage
const sessionStorageAtom = atomWithStorage(
  'some-key', 
  initialValue,
  createJSONStorage(() => sessionStorage)
)

// 使用localStorage（默认）
const localStorageAtom = atomWithStorage('key', initialValue)

复杂状态序列化方案

对于包含多个原子的复杂状态，可以使用序列化模式：

type SerializeAction = 
  | { type: 'serialize'; callback: (value: string) => void }
  | { type: 'deserialize'; value: string }

const serializeAtom = atom(null, (get, set, action: SerializeAction) => {
  if (action.type === 'serialize') {
    const state = {
      todos: get(todosAtom),
      settings: get(settingsAtom)
    }
    action.callback(JSON.stringify(state))
  } else if (action.type === 'deserialize') {
    const state = JSON.parse(action.value)
    set(todosAtom, state.todos)
    set(settingsAtom, state.settings)
  }
})

// 使用组件
const PersistControls = () => {
  const [, dispatch] = useAtom(serializeAtom)
  
  const save = () => dispatch({
    type: 'serialize',
    callback: (value) => localStorage.setItem('appState', value)
  })
  
  const load = () => {
    const value = localStorage.getItem('appState')
    value && dispatch({ type: 'deserialize', value })
  }

  return (
    <div>
      <button onClick={save}>保存状态</button>
      <button onClick={load}>加载状态</button>
    </div>
  )
}

结合atomFamily的使用

当使用atomFamily管理动态原子时，持久化需要特殊处理：

const serializeAtom = atom(null, (get, set, action: SerializeAction) => {
  if (action.type === 'serialize') {
    const todos = get(todosAtom)
    const todoMap = {}
    todos.forEach(id => {
      todoMap[id] = get(todoAtomFamily({ id }))
    })
    const state = { todos, todoMap }
    action.callback(JSON.stringify(state))
  } else if (action.type === 'deserialize') {
    const { todos, todoMap } = JSON.parse(action.value)
    todos.forEach(id => {
      const todo = todoMap[id]
      set(todoAtomFamily({ id, ...todo }), todo)
    })
    set(todosAtom, todos)
  }
})