So überschreiben Sie Ihren Zustandsstatus.

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-Zustand zu verstehen.

• Status zusammenführen: 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.

• Status überschreiben: 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 soll der Status überschrieben werden?

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

• Zustand nach einer Formularübermittlung zurücksetzen.

• Status vollständig ersetzen, wenn ein anderer Datensatz geladen wird.

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('can set the store without merging', () => {
  const { setState, getState } = create<{ a: number } | { b: number }>(
    (_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 Anfangszustand erstellt:

const { setState, getState } = create<{ a: number } | { b: number }>(
    (_set) => ({
      a: 1,
    }),
  )

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 Die wichtigste Operation hier besteht darin, den aktuellen Zustand, { a: 1 }, durch einen völlig neuen Zustand zu ersetzen:

setState({ b: 2 }, true)

• 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 Zustand vollständig ersetzt, sodass { a: 1 } entfernt wird und der neue Zustand 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 })

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.

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

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

Fazit

Zustand bietet eine unkomplizierte 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 die Mission, 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, die Best Practices erlernen und Projekte in Produktionsqualität erstellen.

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 hello@thinkthroo.com, 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

Das obige ist der detaillierte Inhalt vonSo überschreiben Sie Ihren Zustandsstatus.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!