Zustand, Wann, Wie und Warum

Inhaltsverzeichnis

1. Einführung in das Staatsmanagement
2. Zustand verstehen
3. Staatstypen
4. Erste Schritte mit Zustand
5. Hauptmerkmale des Zustands
6. Implementierungsbedingung
7. Zustand vs. andere State-Management-Lösungen
8. Systemdesign des Zustands
9. Persistierender Zustand mit Zustand
10. Verwendung von Zustands-Außenreaktionskomponenten
11. Beispiele aus der Praxis
12. Fazit
13. Tipps: Umgang mit asynchronem Code mit Bedingung

1. Einführung in das Staatsmanagement

Zustandsverwaltung ist ein entscheidender Aspekt der modernen Webentwicklung, insbesondere bei komplexen Anwendungen. Dazu gehört der Umgang mit Daten, die sich im Laufe der Zeit ändern können, und die Sicherstellung, dass diese Daten in der gesamten Anwendung konsistent dargestellt werden. Eine effektive Zustandsverwaltung führt zu vorhersehbareren und besser wartbaren Anwendungen.

2. Zustand verstehen

Zustand ist eine kleine, schnelle und skalierbare Zustandsverwaltungslösung für React-Anwendungen. Zustand wurde von Jared Palmer und Daishi Kato entwickelt und bietet eine einfache und intuitive API, die die Zustandsverwaltung im Vergleich zu anderen Lösungen weniger umständlich macht.

3. Staatstypen

Bevor wir tiefer in den Zustand eintauchen, wollen wir die verschiedenen Zustandstypen in Webanwendungen verstehen:

1. Lokaler Zustand: Zustand, der spezifisch für eine Komponente ist und nicht mit anderen Teilen der Anwendung geteilt werden muss.
2. Globaler Zustand: Zustand, auf den mehrere Komponenten in der gesamten Anwendung zugreifen und ihn ändern müssen.
3. Remote-Status: Status, der Daten darstellt, die von einer externen Quelle abgerufen werden, normalerweise einer API.

Zustand zeichnet sich durch die Verwaltung sowohl lokaler als auch globaler Status aus und kann in Lösungen für die Remote-Statusverwaltung integriert werden.

4. Erste Schritte mit Zustand

Um Zustand zu verwenden, installieren Sie es zunächst über npm, Yarn oder pnpm:

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

5. Hauptmerkmale des Zustands

Zustand verfügt über mehrere Funktionen, die es auszeichnen:

1. Einfachheit: Zustand verfügt über eine minimale API, wodurch es einfach zu erlernen und zu verwenden ist.
2. Kein Boilerplate: Im Gegensatz zu einigen anderen Zustandsverwaltungslösungen erfordert Zustand nur sehr wenig Setup-Code.
3. Hooks-basiert: Zustand nutzt React Hooks, sodass es sich wie ein nativer Bestandteil der modernen React-Entwicklung anfühlt.
4. TypeScript-Unterstützung: Zustand funktioniert hervorragend mit TypeScript und bietet hervorragende Typinferenz.
5. Middleware-Unterstützung: Zustand ermöglicht Ihnen die Erweiterung seiner Funktionalität durch Middleware.
6. Devtools-Unterstützung: Zustand lässt sich zum Debuggen gut in Redux DevTools integrieren.
7. Framework-agnostisch: Obwohl Zustand hauptsächlich mit React verwendet wird, kann er in jeder JavaScript-Umgebung verwendet werden.

6. Umsetzungsbedingung

Sehen wir uns eine grundlegende Implementierung von Zustand:
an

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>
}

In diesem Beispiel erstellen wir einen Shop mit einem Bärenstatus und zwei Aktionen, um ihn zu ändern. Die BearCounter- und Controls-Komponenten können dann mithilfe des useStore-Hooks auf den Status zugreifen und ihn ändern.

7. Zustand im Vergleich zu anderen Lösungen für das Zustandsmanagement

Vergleichen wir Zustand mit anderen beliebten Lösungen zur Zustandsverwaltung:

Zustand vs. Redux

Vorteile des Zustands:

• Einfachere API mit weniger Boilerplate
• Keine Notwendigkeit für Aktionsersteller oder Schalteranweisungen
• Kleinere Bündelgröße

Nachteile:

• Weniger etabliertes Ökosystem
• Weniger Middleware-Optionen

Zustand vs. MobX

Vorteile des Zustands:

• Einfachere, weniger magische API
• Bessere Leistung für größere Anwendungen

Nachteile:

• Standardmäßig weniger reaktiv
• Keine berechneten Werte im Auslieferungszustand

Zustand vs. Rückstoß

Vorteile des Zustands:

• Einfacheres mentales Modell
• Funktioniert außerhalb von React

Nachteile:

• Weniger granulare Reaktivität
• Kein integriertes Atomfamilienkonzept

8. Systemdesign des Zustands

Zustands Systemdesign basiert auf einigen Grundprinzipien:

1. Single store: Zustand encourages the use of a single store for all application state.
2. Immutability: State updates are handled immutably, ensuring predictable behavior.
3. Subscriptions: Components subscribe to specific parts of the state, re-rendering only when those parts change.
4. 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:

1. Direct Integration: Asynchronous functions can be defined directly in the store.
2. No Special Syntax: You don't need to use special action creators or thunks.
3. State Updates: You can update the state within async functions using the set function.
4. 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:

1. We define an async fetchUser function directly in the store.
2. The function manages loading and error states alongside the user data.
3. We use the set function to update the state at different points in the async operation.
4. 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

1. Simplicity: No need for additional middleware or complex action creators.
2. Flexibility: You can structure your async logic however you prefer.
3. Readability: Async operations are defined close to the relevant state.
4. 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.

Fazit für Async

Zustands Umgang mit asynchronem Code verdeutlicht seine Philosophie der Einfachheit und Flexibilität. Indem es Entwicklern ermöglicht, asynchrone Funktionen ohne spezielle Syntax oder Middleware direkt im Store zu schreiben, erleichtert Zustand die Verwaltung komplexer Zustandsoperationen und hält gleichzeitig die Codebasis sauber und lesbar.

Dieser Ansatz für asynchronen Code macht es in Kombination mit den anderen Funktionen von Zustand, wie der geringen Bundle-Größe und der einfachen Einrichtung, zu einer hervorragenden Wahl für Projekte jeder Größe, insbesondere für Projekte, die eine erhebliche asynchrone Zustandsverwaltung erfordern.

Ich hoffe, dieser „irgendwie Leitfaden“ war nützlich und aufschlussreich für alle von Ihnen, die darüber nachdenken, wie Sie Ihren globalen Bewerbungsstatus verwalten können.
Vielen Dank und viel Spaß beim Codieren.

Schauen Sie sich auf meiner Website unter https://www.ricardogesteves.com um

Folge mir @ricardogesteves
X(twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack-Entwickler | Leidenschaft für die Schaffung intuitiver und wirkungsvoller Benutzererlebnisse | Sitz in Lissabon, Portugal ?? - Ricardo GEsteves

github.com

Das obige ist der detaillierte Inhalt vonZustand, Wann, Wie und Warum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!