Heim Web-Frontend js-Tutorial Wie man Redux versteht

Wie man Redux versteht

Sep 28, 2017 am 09:05 AM
redux 如何 理解

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)
Nach dem Login kopieren

 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
  }
Nach dem Login kopieren

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)
    }
  }
Nach dem Login kopieren

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
  }
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verstehen Sie die Wertübergabemethode in PHP richtig So verstehen Sie die Wertübergabemethode in PHP richtig Mar 08, 2024 pm 03:30 PM

So verstehen Sie die Wertübergabemethode in PHP richtig

Umfassendes Verständnis für die Verwendung von Linux-Pipelines Umfassendes Verständnis für die Verwendung von Linux-Pipelines Feb 21, 2024 am 09:57 AM

Umfassendes Verständnis für die Verwendung von Linux-Pipelines

Gibt es eine Zukunft für eine Beschäftigung in der klinischen Pharmazie an der Harbin Medical University? (Wie sind die Beschäftigungsaussichten für die klinische Pharmazie an der Harbin Medical University?) Gibt es eine Zukunft für eine Beschäftigung in der klinischen Pharmazie an der Harbin Medical University? (Wie sind die Beschäftigungsaussichten für die klinische Pharmazie an der Harbin Medical University?) Jan 02, 2024 pm 08:54 PM

Gibt es eine Zukunft für eine Beschäftigung in der klinischen Pharmazie an der Harbin Medical University? (Wie sind die Beschäftigungsaussichten für die klinische Pharmazie an der Harbin Medical University?)

React Redux Tutorial: So verwenden Sie Redux zur Verwaltung des Front-End-Status React Redux Tutorial: So verwenden Sie Redux zur Verwaltung des Front-End-Status Sep 26, 2023 am 11:33 AM

React Redux Tutorial: So verwenden Sie Redux zur Verwaltung des Front-End-Status

Detailliertes Verständnis der strings.Split-Funktion in der Go-Sprachdokumentation Detailliertes Verständnis der strings.Split-Funktion in der Go-Sprachdokumentation Nov 04, 2023 pm 01:14 PM

Detailliertes Verständnis der strings.Split-Funktion in der Go-Sprachdokumentation

Verstehen Sie die Bedeutung von Go-Sprachkommentaren Verstehen Sie die Bedeutung von Go-Sprachkommentaren Mar 29, 2024 pm 04:48 PM

Verstehen Sie die Bedeutung von Go-Sprachkommentaren

Vertiefte Kenntnisse der booleschen Typen in MySQL Vertiefte Kenntnisse der booleschen Typen in MySQL Mar 15, 2024 pm 05:30 PM

Vertiefte Kenntnisse der booleschen Typen in MySQL

Best Practices zum Erstellen skalierbarer Webanwendungen mit Go und Redux Best Practices zum Erstellen skalierbarer Webanwendungen mit Go und Redux Jun 18, 2023 pm 01:59 PM

Best Practices zum Erstellen skalierbarer Webanwendungen mit Go und Redux

See all articles