使用 Zustand 管理用户状态的指南

在 React 中管理应用状态有多种方式，其中 Zustand 是一个轻量级的状态管理库，使用简单且性能优秀。本文将通过代码示例，介绍如何使用 Zustand 来管理用户的登录状态。

代码示例：使用 Zustand 管理用户状态

首先，我们来看一下使用 Zustand 的代码示例：

import { create } from "zustand";

export const useUserStore = create((set) => ({
  user: null,
  login: () => set({ user: { name: "pedro", email: "pedro@pedrotech.co" } }),
  logout: () => set({ user: null }),
}));

在上面的代码中：

useUserStore 是我们创建的 Zustand store。
user：表示用户状态，初始值为 null，表示未登录。
login 和 logout：用于设置用户状态的登录和登出方法，分别更新用户为某个具体对象或将其置为空。

Zustand 的优势在于它的简洁和清晰。它通过创建一个 store，并使用 hooks 来获取和修改状态，避免了在组件间传递过多的 props。

代码示例：User Profile 组件

以下是使用 Zustand 的 UserProfile 组件：

import React from "react";
import { useUserStore } from "./contexts/zustand/useUserStore";

function UserProfile() {
  const { user, login, logout } = useUserStore();
  return (
    <div>
      {user ? (
        <div>
          <p>Welcome, {user.name}!</p>
          <p>Email: {user.email}</p>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <div>
          <p>Please log in</p>
          <button onClick={login}>Login</button>
        </div>
      )}
    </div>
  );
}

export default UserProfile;