简单使用 zustand 做持久化状态管理

初始化一个 store

js
import { create } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';

export const useThemeStore = create(
  persist(
    (set) => ({
      theme: null, //初始化数据异步获取
      setTheme: (theme) => set(() => ({ theme })),
    }),
    {
      name: 'theme', // name of the item in the storage (must be unique)
      storage: createJSONStorage(() => localStorage), // (optional) by default, 'localStorage' is used
    }
  )
);

使用

jsx
const [theme, setTheme] = useThemeStore((state) => [
  state.theme,
  state.setTheme,
]);

// 初始化数据
useEffect(() => {
  fetchTheme().then((theme) => {
    useThemeStore.setState({ theme });
  });
}, []);
// 修改状态
setTheme(...);

typescript 支持

详细用法参考

ts
import { create, StoreMutators, StoreMutatorIdentifier } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';

interface themeState {
  theme: 'dark' | 'light';
  setTheme: (theme: 'dark' | 'light') => void;
}
type StoreIdentifier = [keyof StoreMutators<unknown, unknown>, unknown][];

//[StoreMutatorIdentifier, unknown][]
export const useThemeStore = create<themeState, StoreIdentifier>(
  persist(
    (set) => ({
      theme: null, //初始化数据异步获取
      setTheme: (theme) => set(() => ({ theme })),
    }),
    {
      name: 'theme', // name of the item in the storage (must be unique)
      storage: createJSONStorage(() => localStorage), // (optional) by default, 'localStorage' is used
    }
  )
);

数组类型数据怎么写

js
export const useDeviceStore = create(
  persist(
    (set) => ({
      devices: [],
      addDevice: (device) => set(() => ({ devices: [device] })),
      removeDevice: (devices) => set(() => ({ devices })),
      removeDevices: () => set(() => ({ devices: [] })),
    }),
    { name: 'devices', storage: createJSONStorage(() => sessionStorage) }
  )
);

总结

本教程仅仅简单介绍了如何使用 Zustand 在 React 中管理状态。 Zustand 提供了对状态的轻松访问和更新，使其成为其他状态管理器的友好替代方案。更高级用法待探索。