React状态管理——zustand

安装

复制代码
npm i zustand

基本使用

javascript 复制代码
import React from "react";
import { create } from "zustand";
​
// 1. 创建store
const useStore = create((set) => {
  return {
    // 状态数据
    count: 0,
    inc: (data) => {
      set((state) => ({ count: state.count + data }));
    },
  };
});
​
// 2. 绑定store到组件
​
export default function App() {
  const { count, inc } = useStore();
  return (
    <div>
      <div>count:{count}</div>
      <button onClick={() => inc(1)}>点我+1</button>
    </div>
  );
}

异步支持

javascript 复制代码
import React from "react";
import { create } from "zustand";
​
const URL = "http://geek.itheima.net/v1_0/channels";
// 1. 创建store
const useStore = create((set) => {
  return {
    // 状态数据
    count: 0,
    inc: (data) => {
      set((state) => ({ count: state.count + data }));
    },
    // 异步支持
    // 状态数据
    channelList: [],
    fetchGetList: async () => {
      const res = await fetch(URL);
      const jsonRes = await res.json();
      set(() => ({ channelList: jsonRes.data.channels }));
    },
  };
});
​
// 2. 绑定store到组件
​
export default function App() {
  const { count, inc, fetchGetList, channelList } = useStore();
  return (
    <div>
      <div>count:{count}</div>
      <button onClick={() => inc(1)}>点我+1</button>
      <button onClick={() => fetchGetList()}>异步支持</button>
      {channelList.map((item) => (
        <div>{item.id}</div>
      ))}
    </div>
  );
}

​切片模式

javascript 复制代码
import { create } from "zustand";
​
const URL = "http://geek.itheima.net/v1_0/channels";
// 1. 创建counter相关切片
const counterStore = (set) => {
  return {
    // 状态数据
    count: 0,
    inc: (data) => {
      set((state) => ({ count: state.count + data }));
    },
    asyncInc: (data) => {
      setTimeout(() => {
        set((state) => ({ count: state.count + data }));
      }, 2000);
    },
  };
};
// 2. 创建channel相关切片
const channelStore = (set) => {
  return {
    channelList: [],
    fetchGetList: async () => {
      const res = await fetch(URL);
      const jsonRes = await res.json();
      set(() => ({ channelList: jsonRes.data.channels }));
    },
  };
};
// 3.组合切片
const useStore = create((...a) => {
  return {
    ...counterStore(...a),
    ...channelStore(...a),
  };
});
​
export default function App() {
  const { count, inc, fetchGetList, asyncInc, channelList } = useStore();
  return (
    <div>
      <div>count:{count}</div>
      <button onClick={() => inc(1)}>点我+1</button>
      <button onClick={() => asyncInc(2)}>异步+2</button>
      <button onClick={() => fetchGetList()}>异步支持</button>
      {channelList.map((item) => (
        <div key={item.id}>{item.id}</div>
      ))}
    </div>
  );
}
复制代码
相关推荐
yume_sibai5 分钟前
Vue 插槽
前端·javascript·vue.js
GISer_Jing2 小时前
50道JavaScript基础面试题:从基础到进阶
开发语言·javascript·ecmascript
伍哥的传说11 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang45311 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself24311 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
Feather_7413 小时前
从Taro的Dialog.open出发,学习远程控制组件之【事件驱动】
javascript·学习·taro
\光辉岁月/14 小时前
Axios基本使用
javascript·axios
波波鱼દ ᵕ̈ ૩14 小时前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
cypking15 小时前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
Watermelo61715 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化