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 }),//置0updateBears: (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;