zustand初体验

usmile.

已于 2022-08-25 10:39:56 修改

阅读量1.2k

点赞数 8

文章标签： javascript 前端开发语言

于 2022-08-24 11:32:59 首次发布

本文链接：https://blog.csdn.net/weixin_60208344/article/details/126499732

版权

今天凌晨一点，突然有个人加我的qq，一看竟然是十年前被我删掉的初恋。。。。

因为之前在qq空间有太多的互动，所以qq推荐好友里面经常推荐我俩互相认识。。。。谜之尴尬

同意好友申请以后，仔细看了她这十年间所有的qq动态和照片。
她变美了，会打扮了，以前瘦瘦的身材配上现在的装扮和妆容，已经是超越我认知的女神了。

而我依然碌碌无为，逐渐臃肿的身体加上日益上扬的发际线，每天为生活操劳和奔波，还穷。

用一句话形容现在的感受就是：
“妳已经登上更高的巅峰而我只能望着妳远去的背影”。

默默点了根烟，把她长得好看的照片都保存了下来。

首先在看这篇文章之前相信你对redux也有一定的了解了，在web优化中，资源大小是放在第一位的，在每一个项目中引入一个工具库，都要去考虑是否有更轻量级的代替品，比如moment，在这里笔者更偏向于dayjs。这里就会延伸出今天的zustand了。

我们都知道redux，zustand都是react的状态管理工具，那什么是状态呢。这里延伸出两个概念，局部状态和全局状态比如checkbox的选中，这种状态可以看做为局部状态，这个状态的改变不会影响其他页面发声变化，如果一个状态影响其他页面的改变，比如主题的改变，这个时候需要把这个状态抽出来提到全局进行管理，那么这种状态就是全局状态。

了解完状态的概念后，进入我们今天的主题zustand，首先我们先创建一个新项目

npx create-react-app zustanddemo
cd zustanddemo 
npm i zustand
npm start

现在我们已经安装好zustand了，在src目录下新建一个store的文件夹，新建一个count的js文件

import create from "zustand";
const useCountStore = create((set) => ({
  count: 0,
}));
export { useCountStore };

以上的是我们创建了一个count的store，count的初始值是0，在这里我们从zustand里边引入了create方法来创建store他接受一个回调函数。

那store创建好了我们怎么去访问呢？

import React from "react";
import { useCountStore } from "./store/count";
export default function App() {
  const getCount = useCountStore((state) => state.count);
  return <div>this is count value {getCount}</div>;
}

在上文中我们从countj.js文件里边引入了useCountStore，在这个store的state里边包含了count，那么好跑一下项目看一下效果 npm start

除了可以访问store，我们也可以改变count的值

import create from "zustand";
const useCountStore = create((set) => ({
  count: 0,
  addCount: () => set((state) => ({ count: state.count + 1 })),
  removeCount: () => set((state) => ({ count: state.count - 1 })),
}));
export { useCountStore };

在上文我们定义了两个属性,addCount,removeCount去改变count的值，前者作用是count+1，后者是count-1

在页面中使用

import React from "react";
import { useCountStore } from "./store/count";
import "./App.css";
export default function App() {
  const getCount = useCountStore((state) => state.count);
  const changeAddCount = useCountStore((state) => state.addCount);
  const changeRemoveCount = useCountStore((state) => state.removeCount);

  return (
    <div className="App">
      this is count value {getCount}
      <button onClick={changeAddCount}>Click add</button>
      <button onClick={changeRemoveCount}>Click remove</button>
    </div>
  );
}

那我们怎么去处理异步的数据呢?只需要发出fetch,再去调set()方法就行了。

import create from "zustand";
import axios from "axios"
const useCountStore = create((set,get) => ({
  count: 0,
  arr:[],
  addCount: () => set((state) => ({ count: state.count + 1 })),
  removeCount: () => set((state) => ({ count: state.count - 1 })),
  fetchList: async (params) => {
    let res = await axios.get("/user", {params});
    set({ arr: await res })
  },

}));
export { useCountStore };

提到状态管理工具就有一个共同的特点就是持久化状态，那么zustand如何去做持久化呢？

很简单 zustand提供一个persist的中间件，这个中间件通过localStorage来持久化数据

import create from "zustand";
import { persist } from "zustand/middleware";
let store = (set, get) => ({
  peopleList: ["小王", "小胡", "小刘"],
});
//持久化存储
store = persist(store, { name: "peopleNameList" });
const usePeopleStore = create(store);
export { usePeopleStore };