In diesem Artikel untersuchen wir, wie Zustand das Ersetzen von Zuständen mit der Funktion „setState“ ermöglicht, und konzentrieren uns dabei auf eine interessante Funktion: das Überschreiben des Zustands ohne Zusammenführen. Wir erklären Ihnen die Verwendung anhand eines einfachen Testfalls.

Zustandszusammenführung vs. Zustandsüberschreibung verstehen

Bevor Sie sich den Code ansehen, ist es wichtig, den Unterschied zwischen dem Zusammenführen und dem Überschreiben-Status zu verstehen.

• Merging State: Wenn Sie den Status in „Zustand“ (oder „Reagieren“) aktualisieren, wird standardmäßig der neue Status mit dem vorhandenen Status zusammengeführt. Es werden nur die aktualisierten Felder geändert, während der Rest des Status erhalten bleibt.

• Überschreibender Status: Im Gegensatz dazu wird beim Überschreiben des Status der gesamte Status durch ein neues Objekt ersetzt, wobei alle Felder verworfen werden, die im vorherigen Status vorhanden waren, aber kein Teil davon sind des neuen Staates.

Wann der Status überschrieben werden soll

Es gibt Situationen, in denen das Ersetzen des gesamten Status erforderlich ist, zum Beispiel:

• Status nach einer Formularübermittlung zurücksetzen.

• Status beim Laden eines anderen Datensatzes vollständig ersetzen.

Testfall für überschreibenden Zustandsstatus

Hier ist ein einfacher Testfall aus der Codebasis von Zustand, der zeigt, wie der Zustand mithilfe der setState-Funktion überschrieben wird:

it('kann den Store ohne Zusammenführen festlegen', () => { const { setState, getState } = create( (_set) => ({ a: 1, }), ) // Sollte den Status überschreiben, anstatt ihn zusammenzuführen. setState({ b: 2 }, true) erwarten(getState()).toEqual({ b: 2 }) })

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

Den Test aufschlüsseln

1. Erstellen des Stores Zunächst wird ein Zustandsspeicher mit einem Ausgangszustand erstellt:

const { setState, getState } = create( (_set) => ({ a: 1, }), )

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

Der Anfangszustand ist ein Objekt mit einer einzelnen Eigenschaft, die auf 1 gesetzt ist. Die Erstellungsfunktion gibt zwei wesentliche Methoden zurück:

• setState

  : Diese Methode wird verwendet, um den Status des Geschäfts zu aktualisieren.

• getState

  : Diese Methode ruft den aktuellen Status des Stores ab.

2. Überschreiben des Zustands Der Schlüsselvorgang hier besteht darin, den aktuellen Zustand, { a: 1 }, durch einen völlig neuen Zustand zu ersetzen:

setState({ b: 2 }, true)

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

Durch die Übergabe des True-Flags als zweites Argument weiß Zustand, dass es den Zustand
• überschreiben sollte, anstatt das neue Objekt { b: 2 } mit dem vorhandenen zusammenzuführen. Dadurch wird der vorherige Status vollständig ersetzt, sodass { a: 1 } entfernt wird und der neue Status zu { b: 2 } wird.

3. Validierung der Zustandsersetzung Abschließend stellt der Test sicher, dass der Zustand vollständig ersetzt wurde:

expect(getState()).toEqual({ b: 2 })

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

Es wird erwartet, dass nach dem Aufruf von setState({ b: 2 }, true) der Status des Speichers nur noch { b: 2 } und nicht mehr { a: 1 } enthält.

Wie der Zustand den Zustand überschreibt

Das folgende Bild stammt aus dem Zustand-Quellcode, der den Zustand festlegt.

Wie Sie sehen können, wird nextState zum neuen Status, wenn ein Ersetzungsflag vorhanden ist.

(ersetzen ?? (typeof nextState !== 'object' || nextState === null))

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

Dies ist eine clevere Möglichkeit, wenn „replace“ falsch ist, was standardmäßig der Fall ist, (typeof nextState !== „object“ || nextState === null)) die Bedingung überprüft wird.

Abschluss

Zustand bietet eine einfache Möglichkeit, den Status in React zu verwalten, und die Möglichkeit, den Status mithilfe von setState mit dem Override-Flag vollständig zu überschreiben, bietet zusätzliche Flexibilität. Unabhängig davon, ob Sie ein Formular zurücksetzen, neue Daten laden oder alte Werte löschen möchten, können Sie mit dieser Funktion vollständig steuern, wie der Status in Ihrer Anwendung verwaltet und aktualisiert wird.

Über uns:

Bei Think Throo haben wir es uns zur Aufgabe gemacht, die fortgeschrittenen Codebasis-Architekturkonzepte zu vermitteln, die in Open-Source-Projekten verwendet werden.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, lernen Sie die Best Practices kennen und erstellen Sie Projekte in Produktionsqualität.

Wir sind Open Source – https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Verbessern Sie die Fähigkeiten Ihres Teams mit unseren Fortgeschrittenenkursen basierend auf der Codebasis-Architektur. Kontaktieren Sie uns unter

[email protected], um mehr zu erfahren!

Referenzen:

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L471C13-L471C50

2. https://github.com/pmndrs/zustand/tree/v4.5.5?tab=readme-ov-file#overwriting-state