Wie man Redux versteht

Redux-Prinzip

Ein Unternehmen hat drei Geschäftsfelder: Logistik (actionType), E-Commerce (actionType) und Werbung ( actionType) werden die aus den drei Unternehmen erwirtschafteten Mittel einheitlich im Finanzsystem (Staat) des Unternehmens erfasst. Eines Tages verkaufte das E-Commerce-Unternehmen auf der E-Commerce-Plattform des Unternehmens Waren im Wert von 1 Million. Die Einnahmen wurden in Form von Rechnungen (Versand) an die Finanzabteilung des Unternehmens gesendet Der erzielte Gewinn (Reduzierer) wird dann an das Finanzsystem (Staat) weitergegeben.

Kernprinzip: Durch eine Ereignisaktion werden die Ergebnisse per Versand an den Reduzierer gesendet. Im Reduzierer werden verschiedene Geschäftsprozesse für die Daten gemäß verschiedenen Aktionstypen ausgeführt und anschließend die Endergebnisse aktualisiert Staatsbaum.

Da einige meiner Chefs die Finanzmittel des Unternehmens genau im Auge behalten und immer auf Änderungen der Finanzmittel achten müssen, richten sie eine Veranstaltung (Abonnieren) ein, um eine SMS zu senden, um sie (Zuhörer) zu benachrichtigen, wenn sie dort sind ist eine Änderung der Mittel.

Prinzip: Redux verfügt über ein integriertes Listener-Array, das ein externes Abonnement für Zustandsdatenänderungsereignisse ermöglicht. Wenn sich die Daten im Zustandsbaum ändern, werden alle Überwachungsereignisse benachrichtigt.

　API-Erklärung

function createStore(reducer, preloadedState, enhancer)

　In der createStore-Methode wird die gesamte Redux-Umgebung initialisiert. preloadedState dient als Anfangswert des Zustandsbaums. Diese Methode gibt die offene Schnittstelle von Redux zurück, und der Status von Redux kann nur über die zurückgegebene API bedient werden.

CreateStore gibt die zurückgegebene API zurück:

 return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }

store.getState: Gibt das aktuell von redux verwaltete Statusobjekt zurück;

store .subscribe: Über diese Schnittstelle können Sie Abonnementereignisse registrieren. Wenn also auf den Status von Redux zugegriffen wird (unabhängig davon, ob die Daten im Status geändert wurden oder nicht), durchläuft Redux alle registrierten Ereignisse.

function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }

store.dispatch: Nachdem die Ereignisaktion ausgeführt wurde, werden die Ergebnisse über den Versand an den Reduzierer weitergeleitet. Das Ergebnis der Aktion muss ein gewöhnliches js-Objekt sein und ein Typattribut enthalten. Im Reduzierer können die Daten je nach Typ unterschiedlich verarbeitet und dann auf den entsprechenden Status aktualisiert werden.

Nach dem Reduzierer werden alle Abhörereignisse durchlaufen, unabhängig davon, ob sich die Daten geändert haben oder nicht.

function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
      )
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

Die gesamte Einzelseitenanwendung muss die Methode createStore nur einmal aufrufen und dann sicherstellen, dass das initialisierte Objekt global verfügbar ist, um eine einheitliche Verwaltung zu erreichen von Daten durch Redux.

Das obige ist der detaillierte Inhalt vonWie man Redux versteht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!