zustand管理工具--React

本文主要是介绍zustand管理工具--React，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

npm i zustand

1.函数参数必须返回一个对象 对象内部编写状态数据和方法

2.set是用来修改数据的专门方法必须调用它来修改数据

语法1: 参数是函数 需要用到老数据的场景
语法2: 参数直接是一个对象 set({ count: 100 })

import { useEffect } from "react";
import { create } from "zustand";// 1. 创建store
const goodsStore = create((set) => ({count: 1,inc: () => set((state) => ({ count: state.count + 1 })),channelList: [],// 异步方法fetchChannelList: async () => {const res = await fetch(URL);const jsonData = await res.json();set({ channelList: jsonData.data.channels });},
}));// 2. 绑定store到组件
function Counter() {const { count, inc, channelList, fetchChannelList } = goodsStore();useEffect(() => {fetchChannelList()}, [fetchChannelList])return (<div><button onClick={inc}>{count}</button><ul>{channelList.map((item) => {return <li key={item.id}>{item.name}</li>;})}</ul></div>);
}export default Counter;

3.切片模式--模块化

import { useEffect } from "react";
import { create } from "zustand";// 1. 创建store
const goodsStore = (set) => ({count: 1,inc: () => set((state) => ({ count: state.count + 1 })),
});const channelListStore = (set) => ({channelList: [],// 异步方法fetchChannelList: async () => {const res = await fetch(URL);const jsonData = await res.json();set({ channelList: jsonData.data.channels });},
});const useStore = create((...a) => ({...goodsStore(...a),...channelListStore(...a),}));// 2. 绑定store到组件
function Counter() {const { count, inc, channelList, fetchChannelList } = useStore();useEffect(() => {fetchChannelList();}, [fetchChannelList]);return (<div><button onClick={inc}>{count}</button><ul>{channelList.map((item) => {return <li>{item}</li>;})}</ul></div>);
}export default Counter;

这篇关于zustand管理工具--React的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---