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 中间件函数可以将状态持久化到本地存储中,当页面刷新或者重新加载时,状态依然可以被保留下来。