React状态管理工具zustand

zustand 是极简的状态管理工具

zustand快速上手

创建store（状态数据，操作方法） = = =（绑定组件）= = =》 component（消费数据和方法）

1. 安装：npm i zustand
2. 创建store
3. 绑定store到组件

import {create} from 'zustand'
// 1. 创建store
const useStore = create((set) => {return {// 状态数据count: 0,// 修改状态数据的方法inc: () => {// set是用来修改数据的专门方法，必须调用它来修改数据// 语法1：参数是函数，需要用到老数据的的场景set((state) => ({count: state.count + 1}))// 语法2：参数直接是一个对象// set({count: 100})}}
})function App() {// 2.绑定store到组件const {count, inc} = useStore()return (<div><button onClick={inc}>{count}</button></div>);
}export default App;

zustand异步支持

对于异步的支持不需要特殊的操作，直接在函数中编写异步逻辑，最后只需要调用set方法传入新状态即可

import {create} from 'zustand'
import {useEffect} from "react";const useStore = create((set) => {return {channelList: [],fetchChannelList: async () => {const res = await fetch("http://localhost:3333/channels")const jsonRes = await res.json()console.log(jsonRes);set({channelList: jsonRes.data})}}
})function App() {const {fetchChannelList, channelList} = useStore()useEffect(() => {fetchChannelList()}, [fetchChannelList])return (<div><ul>{channelList.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>);
}export default App;

zustand切片模式

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

import {create} from 'zustand'
import {useEffect} from "react";// 1.拆分子模块
const createCounterStore = (set) => {return{count: 0,inc: () => {set((state) => ({count: state.count + 1}))},}
}const createChannelStore = (set) => {return {channelList: [],fetchChannelList: async () => {const res = await fetch("http://localhost:3333/channels")const jsonRes = await res.json()console.log(jsonRes);set({channelList: jsonRes.data})}}
}
// 2.组合模块
const useStore = create((...a) => {return {...createCounterStore(...a),...createChannelStore(...a)}
})function App() {// 3.使用const {count, inc,fetchChannelList, channelList} = useStore()useEffect(() => {fetchChannelList()}, [fetchChannelList])return (<div><button onClick={inc}>{count}</button><ul>{channelList.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>);
}export default App;