React状态管理工具zustand

zustand 是极简的状态管理工具

zustand快速上手

创建store(状态数据,操作方法) = = =(绑定组件)= = =》 component(消费数据和方法)

  1. 安装:npm i zustand
  2. 创建store
  3. 绑定store到组件
js 复制代码
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方法传入新状态即可

js 复制代码
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比较大的时候,可以使用切片模式进行模块拆分组合,类似于模块化

js 复制代码
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;
相关推荐
cwj&xyp17 分钟前
Python(二)str、list、tuple、dict、set
前端·python·算法
dlnu201525062219 分钟前
ssr实现方案
前端·javascript·ssr
古木201923 分钟前
前端面试宝典
前端·面试·职场和发展
轻口味2 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王2 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发3 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀3 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪3 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef5 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端