React - zustand状态管理

概述

这玩意在我的理解中应该和vue里面的pinia是同样性质的产物，都是做全局状态管理的，具体可以看看代码。

我目前是这样使用的，可能用法比较简陋，毕竟还在学习中。

正文开始，以下是使用 AI 帮我生成的文档，阅读我的代码后帮我生成总结，可以简单看看~

Zustand 是一个轻量级的状态管理库，类似于 Vue 中的 Pinia。它提供了简单而强大的 API 来管理 React 应用中的全局状态。本文将详细介绍如何使用 Zustand 进行状态管理。

基本概念

1. Store（存储）：Zustand 中的核心概念，用于存储和管理状态
2. Actions（动作）：用于修改状态的方法
3. State（状态）：存储的数据

使用示例

以下是一个完整的配置管理示例，展示了如何使用 Zustand 进行状态管理：

1. 定义接口

首先，我们需要定义状态的数据结构和类型：

import { create } from "zustand";
import WailsResp from "@/types/wails_resp";
import {
  ConfigPassAddOrUpdate,
  ConfigPassDelete,
  ConfigPassGetList,
} from "@/wailsjs/go/apps/App";
import { Notification, Modal } from "@douyinfe/semi-ui";

// 配置数据接口
interface ConfigData {
  id: number;
  priority: number;
  username: string;
  password: string;
  port: string;
  status: boolean;
}

// Store 接口定义
interface ConfigStore {
  form: ConfigData; // 表单数据
  show: boolean; // 控制表单显示/隐藏
  dataList: ConfigData[]; // 数据列表
  update: (update: Partial<ConfigStore>) => void; // 更新状态的方法
  reset: () => void; // 重置状态
  resetForm: () => void; // 重置表单
  AddOrUpdate: () => void; // 添加或更新配置
  Delete: (id: number) => void; // 删除配置
  GetList: () => void; // 获取配置列表
}

2. 初始化状态

定义初始状态，确保应用启动时有一个确定的状态：

// 初始列表状态
const initialState: Pick<ConfigStore, "dataList"> = {
  dataList: [],
};

// 初始表单状态
const initialFormState: Pick<ConfigStore, "form" | "show"> = {
  form: {
    id: 0,
    priority: 100,
    username: "",
    password: "",
    port: "623",
    status: false,
  },
  show: false,
};

3. 创建 Store

使用 create 方法创建 store，并实现所有必要的功能：

const useConfigStore = create<ConfigStore>((set, get) => ({
  ...initialState,
  ...initialFormState,

  // 通用更新方法
  update: (update: Partial<ConfigStore>) =>
    set((state) => ({ ...state, ...update })),

  // 重置方法
  reset: () => set(initialState),
  resetForm: () => set(initialFormState),

  // 添加或更新配置
  AddOrUpdate: async () => {
    try {
      const { form } = get();
      const resp: WailsResp = await ConfigPassAddOrUpdate(
        form.id,
        form.username,
        form.password,
        form.port
      );
      if (!resp.Status) {
        throw new Error(resp.Msg);
      }
      Notification.success({
        title: "成功",
        content: resp.Msg,
      });
      get().resetForm();
      get().GetList();
    } catch (error: unknown) {
      Notification.error({
        title: "错误",
        content: error instanceof Error ? error.message : "操作失败",
      });
    }
  },

  // 删除配置
  Delete: async (id: number) => {
    Modal.error({
      title: "危险",
      content: "确定要删除密码组吗？删除后将无法恢复此记录, 请谨慎操作！",
      okButtonProps: {
        onClick: async () => {
          try {
            const resp: WailsResp = await ConfigPassDelete(id);
            if (!resp.Status) {
              throw new Error(resp.Msg);
            }
            Notification.success({
              title: "成功",
              content: resp.Msg,
            });
            get().GetList();
          } catch (error: unknown) {
            Notification.error({
              title: "错误",
              content: error instanceof Error ? error.message : "删除失败",
            });
          }
        },
      },
    });
  },

  // 获取配置列表
  GetList: async () => {
    try {
      const resp: WailsResp = await ConfigPassGetList();
      if (!resp.Status) {
        throw new Error(resp.Msg);
      }
      set({ dataList: resp.Data as ConfigData[] });
    } catch (error: unknown) {
      Notification.error({
        title: "错误",
        content: error instanceof Error ? error.message : "获取列表失败",
      });
    }
  },
}));

使用说明

1. 在组件中使用

import useConfigStore from './store';

function ConfigComponent() {
  // 获取需要的状态和方法
  const { dataList, form, show, update, AddOrUpdate } = useConfigStore();

  // 更新表单数据
  const handleInputChange = (field: keyof ConfigData, value: any) => {
    update({ form: { ...form, [field]: value } });
  };

  // 提交表单
  const handleSubmit = () => {
    AddOrUpdate();
  };

  return (
    // 组件内容
  );
}

2. 主要功能说明

1. 状态更新：

   • 使用 update 方法可以更新任意状态
   • 使用 reset 和 resetForm 可以重置状态

2. 数据操作：

   • AddOrUpdate：添加或更新配置
   • Delete：删除配置
   • GetList：获取配置列表

3. 错误处理：

   • 所有操作都包含错误处理
   • 使用 Notification 组件显示操作结果

3. 最佳实践

1. 状态分离：

   • 将表单状态和列表状态分开管理
   • 使用独立的初始状态对象

2. 错误处理：

   • 统一处理错误情况
   • 提供友好的错误提示

3. 状态更新：

   • 使用 update 方法统一管理状态更新
   • 避免直接修改状态

总结

Zustand 提供了一个简单而强大的状态管理解决方案。通过这个示例，我们可以看到：

1. 如何定义和初始化状态
2. 如何实现状态更新和重置
3. 如何处理异步操作和错误
4. 如何在组件中使用状态

这种模式可以应用于各种场景，特别适合需要管理复杂状态的 React 应用。

完整代码示例(基本都是自己搓的)

import { create } from 'zustand';
import WailsResp from '@/types/wails_resp';
import { ConfigPassAddOrUpdate, ConfigPassDelete, ConfigPassGetList } from '@/wailsjs/go/apps/App';
import { Notification, Modal } from '@douyinfe/semi-ui';

// 暴露接口
interface ConfigData {
  id: number;
  priority: number;
  username: string;
  password: string;
  port: string;
  status: boolean;
}

interface ConfigStore {
  form: ConfigData;
  show: boolean;
  dataList: ConfigData[];
  update: (update: Partial<ConfigStore>) => void;
  reset: () => void;
  resetForm: () => void;
  AddOrUpdate: () => void;
  Delete: (id: number) => void;
  GetList: () => void;
}

// 初始状态
const initialState: Pick<ConfigStore, "dataList"> = {
  dataList: [],
}

// 初始表单状态
const initialFormState: Pick<ConfigStore, "form" | "show"> = {
  form: {
    id: 0,
    priority: 100,
    username: '',
    password: '',
    port: '623',
    status: false,
  },
  show: false,
}


// 创建store
const useConfigStore = create<ConfigStore>((set, get) => ({
  ...initialState, // 初始化状态
  ...initialFormState, // 初始化表单状态
  update: (update: Partial<ConfigStore>) => set((state) => ({ ...state, ...update })),
  reset: () => set(initialState),
  resetForm: () => set(initialFormState),

  // 定义API
  AddOrUpdate: async () => {
    try {
      const { form } = get();
      const resp: WailsResp = await ConfigPassAddOrUpdate(form.id, form.username, form.password, form.port);
      if (!resp.Status) {
        throw new Error(resp.Msg);
      }
      Notification.success({
        title: '成功',
        content: resp.Msg,
      });
      get().resetForm(); // 使用resetForm替代set(initialState)
      get().GetList();
    } catch (error: unknown) {
      Notification.error({
        title: '错误',
        content: error instanceof Error ? error.message : '操作失败',
      });
    }
  },

  // 删除
  Delete: async (id: number) => {
    Modal.error({
      title: '危险',
      content: '确定要删除密码组吗？删除后将无法恢复此记录, 请谨慎操作！',
      okButtonProps: {
        onClick: async () => {
          try {
            const resp: WailsResp = await ConfigPassDelete(id);
            if (!resp.Status) {
              throw new Error(resp.Msg);
            }
            Notification.success({
              title: '成功',
              content: resp.Msg,
            });
            get().GetList();
          } catch (error: unknown) {
            Notification.error({
              title: '错误',
              content: error instanceof Error ? error.message : '删除失败',
            });
          }
        }
      }
    });
  },

  // 获取列表
  GetList: async () => {
    try {
      const resp: WailsResp = await ConfigPassGetList();
      if (!resp.Status) {
        throw new Error(resp.Msg);
      }
      set({ dataList: resp.Data as ConfigData[] });
    } catch (error: unknown) {
      Notification.error({
        title: '错误',
        content: error instanceof Error ? error.message : '获取列表失败',
      });
    }
  }
}));

export default useConfigStore;