Zustand介绍与使用 React状态管理工具的解决方案

import {create} from 'zustand'
const useBookStore = create<any>((set,get)=>({
price: 30,
total:100,
increment(){
set(( state:any ) => ({ total: state.total + 1 }));
},
decrement(){
set(( state:any ) => ({ total: Math.max(state.total - 1, 0) })); // 确保total不小于0
},
getTotal(){
return get().price * get().total
}
}))
export default useBookStore

const Child1 =() => {
const price = useBookStore((state:any)=> state.price)
const total= useBookStore((state:any)=> state.total)
const increment = useBookStore((state:any) => state.increment )
const decrement = useBookStore((state:any) => state.decrement )
const getTotal = useBookStore((state:any)=> state.getTotal)
return (
<>
<h2>{price}</h2>
<h2>{total}</h2>
<h2>{getTotal()}</h2>
<button onClick={decrement}>decrement</button>
<button onClick={increment}>increment</button>
</>
)
}

async bookPromotion(){
//使用Promise来模仿异步操作
let rate = await Promise.resolve(0.8);
set(( state:any )=>{
state.price *= rate
})
}

import {immer } from 'zustand/middleware/immer'
const useBookStore = create<any>()(immer((set,get)=>({
price: 40,
total:100,
increment(){
set(( state:any ) => { state.total += 1 });
},
decrement(){
set(( state:any ) => { Math.max(state.total -= 1, 0) }); // 确保total不小于0
},
getTotal(){
return get().price * get().total
},
async bookPromotion(){
//使用Promise来模仿异步操作
let rate = await Promise.resolve(0.8);
set(( state:any )=>{
state.price *= rate
})
}
})))
export default useBookStore

const { price, total, increment, decrement, getTotal, bookPromotion } = useBookStore((state) => ({ price: state.price, total: state.total, increment: state.increment, decrement: state.decrement, getTotal: state.getTotal, bookPromotion: state.bookPromotion, }));

import { useShallow } from 'zustand/react/shallow'
import useBookStore from './zustand/index.tsx'
const Child1 =() => {
// const price = useBookStore((state:any)=> state.price)
// const total= useBookStore((state:any)=> state.total)
const increment = useBookStore((state:any) => state.increment )
const decrement = useBookStore((state:any) => state.decrement )
const getTotal = useBookStore((state:any)=> state.getTotal)
const bookPromotion= useBookStore((state:any)=> state.bookPromotion)
const {price,total} = useBookStore()
return (
<>
<h2>{price}</h2>
<h2>{total}</h2>
<h2>{getTotal()}</h2>
<button onClick={decrement}>decrement</button>
<button onClick={bookPromotion}>promotion</button>
<button onClick={increment}>increment</button>
</>
)
}
const Child2 = () => {
const {test} = useBookStore(useShallow((state:any) =>({ test: state.test})))
console.log(1,2,test)
return <h2>{test}</h2>
}

import {devtools}from "zustand/middleware"
{enable:true,name"bookstore"}

import create from 'zustand';
import { persist } from 'zustand/middleware';
// 创建一个持久化的 store
const useStore = create(persist(
(set) => ({
count: 0,
increase: () => set((state) => ({ count: state.count + 1 })),
decrease: () => set((state) => ({ count: state.count - 1 })),
}),
{
name: ###, // 存储的 key 名称
storage: create(()=> sessionStorage), // 可以选择使用 localStorage 或 sessionStorage
partialize:(state) => ({key:value})
}
));