zustand react ts使用
一款redux替代品的状态管理
实现:
- react状态管理
- ts支持
- 数据持久化储存
- store模块封装
- 三种引入使用的方法
- 清除全部或指定store内容
1、install
npm install zustand # or yarn add zustand
// 清除全部或指定store内容 时使用
npm install lodash-es
npm i --save-dev @types/lodash-es
2、useCountStore.tsx
import { create } from 'zustand';
import { persist, createJSONStorage, devtools } from 'zustand/middleware';
import omit from 'lodash-es/omit'
interface CountState { count: number; increment: () => void; decrement: () => void; name: string; setName: (x:string) => void; resetName: () => void; } const useCountStore = create<CountState>()( devtools( persist( set => ({ // count count: 0, increment: () => set(state => { return { count: state.count + 1 } }), decrement: () => set(state => ({ count: state.count - 1 })), // name name: '--', setName: (name:string) => set(() => ({ name })), resetName: () => set(() => ({ name: '--' }))
/*
增加第二个参数 true,则会删除整个stroe 的状态及操作,如(CountState中所涉及的所有内容)
涉及如 count、increment等使用时会找不到而报错或undefined
*/
// resetName: () => set(() => ({ count: 0, name: '--' }), true)
// 使用 omit,仅删除输入的参数内容,当查看name时,则会是undefined
// resetName: () => set((state) => omit(state, ['name']), true)
}),
{
name: 'zustand-storage',
storage: createJSONStorage(() => sessionStorage),
}
)
)
)
export default useCountStore
3、index.tsx
import React from 'react';
import useCountStore from './useCountStore';
import { shallow } from 'zustand/shallow';
const ZustandView = () => {
// way 1
// const count = useCountStore((state:any) => state.count)
// const increaseCount = useCountStore((state:any) => state.increment)
// const decreaseCount = useCountStore((state:any) => state.decrement)
// const name = useCountStore((state:any) => state.name)
// const setName = useCountStore((state:any) => state.setName)
// const resetName = useCountStore((state:any) => state.resetName)
// count 第二个参数
// const count = useCountStore((state:any) => state.count, (oldCount, newCount) => {
// console.log(oldCount, newCount);
// // 当值仅为 6 时更新
// return newCount === 2 ? false : true
// })
// way 2 // const { count, increment, decrement, name, setName, resetName } = useCountStore((state:any) => ({ // count: state.count, // increment: state.increment, // decrement: state.decrement, // name: state.name, // setName: state.setName, // resetName: state.resetName, // }), shallow) // way 3 const [ count, increment, decrement, name, setName, resetName] = useCountStore((statte:any) => [ statte.count, statte.increment, statte.decrement, statte.name, statte.setName, statte.resetName, ], shallow) return ( <div> <h1>{count}</h1> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> <br /> <h2>{name}</h2> <button onClick={() => setName('qwe')}>Set Name</button> <button onClick={resetName}>Reset Name</button> <br /> <button onClick={() => console.log(count, name)}>look</button> </div> ); }; export default ZustandView;
4、使用
import ZustandPage from './pages/zustandPage'; export default function App() { return <> <ZustandPage></ZustandPage> </> };
官网:https://github.com/pmndrs/zustand