Zustand，何时、如何以及为何-js教程-PHP中文网

1. 状态管理简介

状态管理是现代 Web 开发的一个重要方面，尤其是在复杂的应用程序中。它涉及处理可能随时间变化的数据，并确保该数据在整个应用程序中一致表示。有效的状态管理可以提高应用程序的可预测性和可维护性。

2. 了解 Zustand

Zustand 是一个小型、快速且可扩展的 React 应用程序状态管理解决方案。 Zustand 由 Jared Palmer 和 Daishi Kato 创建，提供了一个简单直观的 API，与其他解决方案相比，使状态管理变得不那么麻烦。

3. 国家类型

在深入了解 Zustand 之前，让我们先了解一下 Web 应用程序中不同类型的状态：

本地状态：特定于组件的状态，不需要与应用程序的其他部分共享。
全局状态：需要由应用程序中的多个组件访问和修改的状态。
远程状态：表示从外部源（通常是 API）获取数据的状态。

Zustand 擅长管理本地和全局状态，并且可以与远程状态管理解决方案集成。

4. Zustand 入门

要开始使用 Zustand，首先通过 npm、yarn 或 pnpm 安装它：

npm install zustand
# or
yarn add zustand
# or
pnpm add zustand

登录后复制

5. Zustand的主要特点

Zustand 具有多项使其脱颖而出的功能：

简单：Zustand 拥有最小的 API，使其易于学习和使用。
没有样板：与其他一些状态管理解决方案不同，Zustand 需要很少的设置代码。
基于 Hooks：Zustand 利用 React Hooks，使其感觉适合现代 React 开发。
TypeScript 支持：Zustand 与 TypeScript 配合得很好，提供出色的类型推断。
中间件支持：Zustand 允许您通过中间件扩展其功能。
Devtools 支持：Zustand 与 Redux DevTools 很好地集成以进行调试。
与框架无关：虽然主要与 React 一起使用，但 Zustand 可以在任何 JavaScript 环境中使用。

6. 实施 Zustand

让我们看一下 Zustand 的基本实现：

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} around here...</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

登录后复制

在此示例中，我们创建一个具有熊状态的商店和两个修改它的操作。然后，BearCounter 和 Controls 组件可以使用 useStore 钩子访问和修改状态。

7. Zustand 与其他状态管理解决方案

让我们将 Zustand 与其他流行的状态管理解决方案进行比较：

Zustand 与 Redux

Zustand 的优点：

更简单的 API，更少的样板文件
不需要动作创建者或 switch 语句
较小的捆绑尺寸

缺点：

尚未建立的生态系统
更少的中间件选项

Zustand 与 MobX

Zustand 的优点：

更简单、更少神奇的 API
大型应用程序的更好性能

缺点：

默认情况下反应性较低
没有开箱即用的计算值

Zustand 与 Recoil

Zustand 的优点：

更简单的心智模型
在 React 之外工作

缺点：

颗粒反应性较小
没有内置原子族概念

八、Zustand系统设计

Zustand 的系统设计基于几个关键原则：

Single store: Zustand encourages the use of a single store for all application state.
Immutability: State updates are handled immutably, ensuring predictable behavior.
Subscriptions: Components subscribe to specific parts of the state, re-rendering only when those parts change.
Middleware: Zustand uses a middleware system for extending functionality.

This design allows Zustand to be both simple and powerful, providing excellent performance even in large applications.

9. Persisting State with Zustand

Zustand makes it easy to persist state, which is crucial for many applications. Here's an example using the persist middleware:

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useStore = create(persist(
  (set, get) => ({
    fishes: 0,
    addAFish: () => set({ fishes: get().fishes + 1 }),
  }),
  {
    name: 'food-storage', // unique name
    getStorage: () => localStorage, // (optional) by default, 'localStorage' is used
  }
))

登录后复制

This will automatically save the state to localStorage and rehydrate it when the app reloads.

10. Using Zustand Outside React Components

One of Zustand's strengths is that it can be used outside of React components. This is particularly useful for integrating with other parts of your application or for testing:

const { getState, setState } = useStore

// Getting state
console.log(getState().bears)

// Setting state
setState({ bears: 10 })

// Using actions
getState().increasePopulation()

登录后复制

11. Real-World Examples

Let's look at some real-world examples of using Zustand:

Authentication State

import { create } from 'zustand'

const useAuthStore = create((set) => ({
  user: null,
  isAuthenticated: false,
  login: (userData) => set({ user: userData, isAuthenticated: true }),
  logout: () => set({ user: null, isAuthenticated: false }),
}))

// Usage in a component
function LoginButton() {
  const { isAuthenticated, login, logout } = useAuthStore()

  const handleAuth = () => {
    if (isAuthenticated) {
      logout()
    } else {
      // Simulate login
      login({ id: 1, name: 'John Doe' })
    }
  }

  return (
    <button onClick={handleAuth}>
      {isAuthenticated ? 'Logout' : 'Login'}
    </button>
  )
}

登录后复制

Shopping Cart

import { create } from 'zustand'

const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (itemId) => set((state) => ({
    items: state.items.filter((item) => item.id !== itemId),
  })),
  clearCart: () => set({ items: [] }),
  total: 0,
  updateTotal: () => set((state) => ({
    total: state.items.reduce((sum, item) => sum + item.price, 0),
  })),
}))

// Usage in components
function CartSummary() {
  const { items, total, removeItem } = useCartStore()

  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>
          {item.name} - ${item.price}
          <button onClick={() => removeItem(item.id)}>Remove</button>
        </div>
      ))}
      <div>Total: ${total}</div>
    </div>
  )
}

登录后复制

Theme Switcher

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useThemeStore = create(persist(
  (set) => ({
    theme: 'light',
    toggleTheme: () => set((state) => ({
      theme: state.theme === 'light' ? 'dark' : 'light',
    })),
  }),
  {
    name: 'theme-storage',
  }
))

// Usage in a component
function ThemeToggle() {
  const { theme, toggleTheme } = useThemeStore()

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  )
}

登录后复制

12. Conclusion

Zustand offers a refreshing approach to state management in React applications. Its simplicity, flexibility, and performance make it an excellent choice for both small and large projects. By reducing boilerplate and providing a straightforward API, Zustand allows developers to focus on building features rather than managing complex state logic.

While it may not have the extensive ecosystem of some older state management solutions, Zustand's design principles and ease of use make it a compelling option for modern React development. Its ability to work outside of React components and easy integration with persistence solutions further extend its utility.

For many React applications, Zustand strikes an excellent balance between simplicity and power, making it worth considering for your next project.

Bonus tips:

Zustand also handles asynchronous functions/code really well and without the need for any Middleware setup.

Let's talk a bit about that:

13. Handling Asynchronous Code with Zustand

One of Zustand's strengths is its simplicity in handling asynchronous operations without the need for additional middleware or complex setups. This makes it particularly easy to work with API calls, data fetching, and other asynchronous tasks.

How Zustand Handles Asynchronous Code

Zustand's approach to asynchronous code is straightforward:

Direct Integration: Asynchronous functions can be defined directly in the store.
No Special Syntax: You don't need to use special action creators or thunks.
State Updates: You can update the state within async functions using the set function.
Error Handling: Error states can be managed directly within the async functions.

Implementing Asynchronous Code

Here's an example of how to implement asynchronous code in Zustand:

import { create } from 'zustand'

const useUserStore = create((set) => ({
  user: null,
  isLoading: false,
  error: null,
  fetchUser: async (userId) => {
    set({ isLoading: true, error: null });
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      if (!response.ok) throw new Error('Failed to fetch user');
      const userData = await response.json();
      set({ user: userData, isLoading: false });
    } catch (error) {
      set({ error: error.message, isLoading: false });
    }
  },
}));

// Usage in a component
function UserProfile({ userId }) {
  const { user, isLoading, error, fetchUser } = useUserStore();

  React.useEffect(() => {
    fetchUser(userId);
  }, [userId]);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return null;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

登录后复制

In this example:

We define an async fetchUser function directly in the store.
The function manages loading and error states alongside the user data.
We use the set function to update the state at different points in the async operation.
In the component, we can use the store's state and actions as usual, with React hooks handling the component lifecycle.

Benefits of Zustand's Approach to Async Code

Simplicity: No need for additional middleware or complex action creators.
Flexibility: You can structure your async logic however you prefer.
Readability: Async operations are defined close to the relevant state.
Easy Testing: Async functions can be easily unit tested.

Comparison with Other Solutions

Unlike Redux, which often requires middleware like Redux Thunk or Redux Saga for handling async operations, Zustand's approach is much more straightforward. This simplicity can lead to less boilerplate and a gentler learning curve, especially for developers new to state management.

MobX and Recoil also offer ways to handle async operations, but Zustand's approach might be considered more intuitive due to its direct use of async/await syntax without additional abstractions.