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