setState in Zustand&#s source code.

In diesem Artikel werde ich einen Überblick darüber geben, wie der Quellcode von setState in Zustand geschrieben ist/funktioniert. Dieses Konzept nutzt Schließungen in JavaScript und Pfeilfunktionen.

StoreApi-Typ ist unkompliziert.

export interface StoreApi<T> {
  setState: SetStateInternal<T>
  getState: () => T
  getInitialState: () => T
  subscribe: (listener: (state: T, prevState: T) => void) => () => void
}

setState akzeptiert zwei Parameter

1. teilweise 

2. ersetzen

Lassen Sie uns ein Experiment mit der Beispiel-Demo-App durchführen, die im Zustand-Repo bereitgestellt wird.

Ich habe einige Konsolenanweisungen in dist eingefügt, um zu sehen, was in „partial“ und „replace“ enthalten ist.

Und das sind die Werte, wenn Sie die Zählung im Demo-Beispiel aktualisieren.

Da „Partial“ hier eine Funktion ist,

 

const nextState = typeof partial === "function" ? partial(state) : partial;

Wenn Sie genau hinsehen, wird der Status beim Erstellen von Store initialisiert und liegt außerhalb der setState-Funktion. Kommt Ihnen das bekannt vor? Siehe Abschlüsse in Javascript.

partial ist eine Pfeilfunktion

(state)=>({
    count: state.count + 1
})

Das Schöne ist, dass Sie diese Funktionen mit einem Parameter aufrufen können, da sie eine Funktion zurückgeben. Deshalb haben wir „partial(state)“ und „state“ liegt außerhalb des setState. setState hat dank Schließungen in JavaScript Zugriff auf diese Zustandsvariable.

Sie können das folgende Code-Snippet in einer Browserkonsole ausführen und es protokolliert, was Sie als Parameter gesendet haben.

(a => console.log(a))("test")
// Output: test

Ich habe ausführliche Artikel über die Verwendung von Object.is und Object.assign geschrieben. Da „replace“ null ist,

if (!Object.is(nextState, state)) {
  const previousState = state
  state =
    (replace ?? (typeof nextState !== 'object' || nextState === null))
      ? (nextState as TState)
      : Object.assign({}, state, nextState)
  listeners.forEach((listener) => listener(state, previousState))
}

Der Status wird mit Object.assign aktualisiert. Wir werden uns einen fortgeschrittenen Anwendungsfall ansehen, bei dem „replace“ nicht null ist, und in zukünftigen Artikeln verstehen, wie sich setState verhält.

Über uns:

Bei Think Throo haben wir die Mission, die Best Practices zu vermitteln, die von Open-Source-Projekten inspiriert sind.

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!)

Möchten Sie maßgeschneiderte Websysteme für Ihr Unternehmen erstellen? Kontaktieren Sie uns unter hello@thinkthroo.com

Über den Autor:

Hey, ich bin Ram. Ich bin ein leidenschaftlicher Softwareentwickler/OSS-Tüftler.

Schauen Sie sich meine Website an: https://www.ramunarasinga.com/

Referenzen:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L64

2. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L9

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Das obige ist der detaillierte Inhalt vonsetState in Zustand&#s source code.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!