react状态管理库 - zustand

什么是zustand？

zustand 是一个轻量级、快速且可扩展的 React 状态管理库，旨在提供一种简单直接的方式来管理应用状态，而无需其他解决方案通常伴随的繁琐代码。根据官方 Zustand 文档，Zustand 是"一个使用简化 flux 原理的小型、快速且可扩展的精简状态管理解决方案"。它允许开发者创建包含状态和操作的 store，这些 store 可以通过 React hooks 进行访问和更新。

中文官网

Zustand 中文网

安装

npm install zustand

基础使用

创建store

import { create } from 'zustand'

const useStore = create((set) => ({  //set是用来修改数据的专门方法，必须调用它来修改数据
  //状态数据  
  bears: 0,
  //修改方法
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), //加一
  removeAllBears: () => set({ bears: 0 }),//置0
  updateBears: (newBears) => set({ bears: newBears }),//接收传递的值并赋值
}))
export default useStore

绑定组件并使用

import useStore from '../../zustand'
const Month = () => {
   const bears = useStore((state) => state.bears)
   const { increasePopulation, removeAllBears, updateBears } = useStore()

  return (
    <div> 
      {bears}
      <button onClick={increasePopulation}>加一</button>
      <button onClick={removeAllBears}>置0</button>
      <button onClick={()=>updateBears(3)}>传值</button>
    </div>
  )
};
export default Month;

异步使用

异步实现接口请求更改数据

import axios from 'axios'
import { create } from 'zustand'

const useStore = create((set) => ({
  listData:[],
  changeList:async()=>{
   let res =await axios.get('https://api.taolale.com/api/xjj/get?key=KadadfdgfdhhjGEK')
   set({listData:res.data.data})
  }
  
}))
export default useStore

组件调用

import useStore from '../../zustand'
const Month = () => {
   const list = useStore((state) => state.listData)
   const { changeList} = useStore()

  return (
    <div> 
      {list}
      <button onClick={changeList}>获取数据</button>
    </div>
  )
};
export default Month;

切片模式（模块化）

拆分模块，在组合起来

场景：当单个store比较大的时候，可以采用切片模式进行模块拆分组合，类似于模块化

模块一 createBearSlice.js

const createBearSlice = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
})
export default createBearSlice

模块二 createFishSlice.js

const createFishSlice = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})
export default createFishSlice

组合模块 index.js

import { create } from 'zustand'
import  createBearSlice from './createBearSlice'
import  createFishSlice from './createFishSlice'

const useBoundStore = create((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
}))
export {useBoundStore}

组件使用 直接解构使用

import { useBoundStore } from './store/index'
const Month = () => {
   const { bears,fishes,addBear} = useBoundStore()

  return (
    <div> 
      {fishes}
      {bears}
      <button onClick={addBear}>加一</button>
    </div>
  )
};
export default Month;