浅浅聊一下Zustand

臧小半
1,066 阅读2分钟

Zustand 是一个状态管理库，它使用 hooks 来管理状态

  • Zustand 只在 state 的值改变时渲染组件, 通常可以处理状态的改变而无需渲染代码

  • 状态管理通过简单定义的操作更新, 在这方面和 Redux 类似, 但是又和 Redux 不太类似, Redux 开发必须创建 reducer、action、dispatch来处理状态, Zustand 不需要这些

  • Zustand不存在使用Context Provides

开始使用

创建一个新的React应用并且安装 Zustand 依赖, 运行下的的命令

npx create-react-app zustand
cd zustand
npm install zustand

现在我们需要创建一个 store 含应用程序使用的所有状态和他们的函数, 我们在src文件中下创建一个store文件夹

image.png

创建index.js 文件，并且创建store

import create from "zustand";
const store = create((set, get) => {
  return {
    num: 0,
    addNum: () => {
      set((state) => {
        return {
          num: state.num + 1
        };
      });
    },
    subtractNum: () => {
      set((state) => {
        return {
          num: state.num - 1
        };
      });
    },
    actions: () => {
    //用于获取参数
      const useNum = get().num
    }
  };
});
export const useStore = store;

这是我创建的一个带有函数和状态的仓库，我们要开始在页面中使用它


import './App.css';
import { useStore } from './store';
function App() {
  const { num,addNum,subtractNum } = useStore()
  return (
    <div className="App">
      <header className="App-header">
        <div onClick={addNum} style={{margin:20,borderRadius:10,padding:10,cursor:'pointer',background:'#1890ff'}}>+1</div>
        <div style={{margin:20}}>{num}</div>
        <div onClick={subtractNum} style={{margin:20,borderRadius:10,padding:10,cursor:'pointer',background:'#1890ff'}}>-1</div>
      </header>
    </div>
  );
}

export default App;

这是我写的一个demo，里面做了简单的加减，我简单的写了效果，如图

image.png

在App.js上我通过useStore引入了仓库，成功引入了初始化的状态， 接下来我们通过点击事件调用实现简单的加减

image.png

Zustand在创建store的时候提供了set, get两个方法，get是用来获取最新状态值，set是用来更新仓库状态里的值。上面的代码中addNum和subtractNum两个简单的函数就是实现了更新，action中，我用了一个get方法来获取num值，十分简单这个状态管理器，基本上最简单的应用就是这样。

Zustand中异步请求就是在函数中使用async，await这里就不过多讲解

zustand/middleware提供了两个中间件persist 的中间件, 该中间件通过 localStorage 来持久化来自应用程序的数据, 这样, 当我们刷新页面或者完全关闭页面时, 状态不会重置

import { persist } from "zustand/middleware"
...
store = persist(store, {name: "demo"})

在上面的代码中, 我们持久化了 store 的值, localStorage 的 key 设为 demo在清除本地存储的操作之前, 状态保持都不变

另外一个中间件来使用 Redux 开发工具扩展从浏览器查看状态值

import devtools from 'zustand/middleware', 
...
store = devtools(store)
avatar
文章
阅读
粉丝