react: zustand数据缓存

react状态库包括 zustand、Redux、Valtio、Jotai 和 Recoil。

定义和使用

// main.ts
import './store'

// store/index.ts
import { create } from 'zustand'
const useStore = create((set) => ({
  bears: 1,
  increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))
export  default useStore

// pages/page1.tsx
import { useNavigate } from 'react-router-dom'
import  useStore from '../store/index'
const  page1 = () => {
    const naviagte = useNavigate()
    // const bears = useStore((state) => state.bears)
    const { bears, increasePopulation } = useStore() as any
    console.log(`
    page1:
       ${bears}
    `)
    return <div>
        page1
        <div onClick={() => {increasePopulation()}}>
            数据： {bears}
            <button>点击修改数据</button>
        </div>
        <button onClick={() => {
            naviagte('/about')
        }}>去page2</button>
    </div>
}
export default page1

在 zustand 库中，middleware 模块提供了一些中间件函数，可以帮助我们更好地管理状态。其中，devtools 和 persist 就是两个常用的中间件函数。
devtools 中间件函数可以将 zustand 状态管理器与浏览器开发者工具集成起来，在开发过程中更方便地调试和监控状态。
persist 中间件函数可以将状态持久化到本地存储中，当页面刷新或者重新加载时，状态依然可以被保留下来。