解锁Zustand的潜力：轻量级状态管理的无限可能

安装zustand

yarn add zustand

创建store

使用creat来创建一个新的store

import { create } from 'zustand'
import { AsyncData } from '../api/xx.js'

//创建store  get()获取状态   set()存储状态
const useCounterStore = create((set, get) => ({
    count: 1,
    name: '岚',
    list:[],
    //同步
    getState: () => set(state => ({ count: state.count + 1 })),
    //异步操作
    getList: async (data) => {
        const res = await AsyncData(data);
        set({ list: res?.list })
    },
    changeCount: (n) => {
        const preCount = get().count + n
        set({ count: preCount })
    }
}))

export default useCounterStore

在组件中使用store

引入store后通过调用useStore并传入选择器函数来访问store中的state和action。

import '../App.css';
import '../scss/Home.scss'
import React from 'react';
import useCounterStore from '../store/counter'

function Home() {
  const count = useCounterStore((state) => state.count)
  const changeCount = useCounterStore((state) => state.changeCount)

  return (
    <div className="Home">
      Home!!!!{name} 
      <br/>
      <button onClick={() => {changeCount(3)}}>count++</button>
    </div>
  );
}

export default Home;

zustand的优缺点

• 优点

1. 轻量级：Zustand的代码库非常小，几乎不会对项目性能产生任何影响。
2. 简洁的API：Zustand提供了清晰而简洁的API，使得开发者可以迅速上手，轻松管理状态。其API设计遵循“少即是多”的原则，通过最少的学习就能达到快速开发的目的。
3. 易上手：Zustand没有多余的概念和引导，API简单，易上手。新建的状态无需通过上面的Provider来包裹，相较于Redux和Context API更为简洁。
4. 支持TypeScript
5. 灵活：Zustand是一个简单且不附加特定偏好的状态管理库。它允许开发者以自己喜欢的方式组织和处理状态，而不会强加特定的架构或模式。

• 缺点

1. 适用场景有限：由于Zustand的轻量级和简洁性，它可能不适合需要管理非常复杂状态的大型应用。
2. 社区和生态系统：相较于Redux，Zustand的社区和生态系统可能较小，这可能会限制其可用性和支持。