Verwenden von React+Redux zum Implementieren der Zählerfunktion und aufgetretene Probleme

Redux ist ein einfacher Statusmanager. Wir werden seine Geschichte nicht verfolgen. Aus der Perspektive der Nutzung: Es bietet einen globalen Objektspeicher, der ein Statusobjekt enthält, das alle Anwendungsdaten enthält, und der Speicher bietet einige Reduzierungsmethoden. Diese Methoden können angepasst werden, um dem Anrufer zu ermöglichen, den Statuswert zu ändern. Der Wert des Status ist schreibgeschützt und darf nur bei Bedarf über den Reducer geändert werden.

Redux

• Kernobjekt: Speichern
• Datenspeicherung: Status
• Schnittstelle zur Übermittlung von Statusaktualisierungen: ==Versand==
• Parameter zur Übermittlung von Statusaktualisierungen: ==Aktion== mit Typ und Nutzlast
• Berechnung der Statusaktualisierung: ==Reducer==
• Einschränkung: Reducer muss eine reine Funktion sein, unterstützt kein Async
• Funktionen: Unterstützt Middleware

Reagieren + Redux

Probleme, die auftreten, wenn Redux in Recat nicht verwendet wird

In React erfolgt die Komponentenkommunikation einseitig. Die Komponente der obersten Ebene kann Daten über das Props-Attribut an die Komponente der unteren Ebene weitergeben, die Komponente der unteren Ebene kann jedoch keine Daten an die Komponente der oberen Ebene weitergeben. Um die Daten der Komponente der unteren Ebene zu ändern, muss die Komponente der oberen Ebene die Methode zum Ändern der Daten an die Komponente der unteren Ebene weitergeben. Je größer das Projekt wird, desto schwieriger wird es, Daten zwischen Komponenten weiterzugeben.

Die Vorteile der Hinzufügung von Redux zu React

Verwenden Sie Redux zur Datenverwaltung. Da Store unabhängig von Komponenten ist, ist die Datenverwaltung unabhängig von Komponenten, wodurch das Problem der schwierigen Datenübertragung zwischen Komponenten gelöst wird.

Redux verwenden

Redux herunterladen

npm installiere Redux react-redux

Redux-Arbeitsablauf

1. Komponenten lösen Aktionen durch Versand aus
2. Der Store akzeptiert die Aktion und leitet sie an den Reducer weiter.
3. Der Reducer ändert den Status entsprechend dem Aktionstyp und gibt die geänderten Daten an den Speicher zurück
4. Die Komponente abonniert den Status im Store und die Statusaktualisierungen im Store werden mit der Komponente synchronisiert.

Implementieren eines Zählers mit react+redux

1. Erstellen Sie ein Projekt und installieren Sie Redux

# Wenn das React-Gerüst nicht installiert ist, führen Sie diesen Befehl aus, um das React-Gerüst zu installieren: npm install -g create-react-app
# Erstellen Sie ein React-Projekt create-react-app project name # Geben Sie den Projekt-CD-Projektnamen ein # Installieren Sie Redux
npm installiere Redux reate-redux

2. Führen Sie Redux ein und implementieren Sie den Zähler in React gemäß dem am Anfang implementierten Code

//index.js
importiere React von „react“;
importiere ReactDOM von „react-dom“;
App aus „./App“ importieren;
importiere { createStore } von „redux“;

const initialState = {
  Anzahl: 0
}
Funktion Reducer (Zustand = Anfangszustand, Aktion) {
  Schalter (Aktion.Typ) {
    Fall 'Inkrement':
      zurückkehren {
        Anzahl: Status.Anzahl + 1
      }
    Fall 'Dekrement':
      zurückkehren {
        Anzahl: Status.Anzahl - 1
      }

    Standard:
      Rückgabestatus
  }
}
const store = createStore(Reduzierer)

konstantes Inkrement = {
  Typ: „Inkrement“
}

const decrement = {
  Typ: „Dekrement“
}

Funktion Zählen() {
  Rückgabewert <div>
    <button onClick={() => store.dispatch(inkrementieren)}>+</button>
    {store.getState().count}
    <button onClick={() => store.dispatch(decrement)}>-</button>
  </div>
}

store.subscribe( () => {
  Konsole.log(store.getState())
  ReactDOM.render(
    <Reagieren.StrictMode>
      <Anzahl />
    </React.StrictMode>,
    document.getElementById('root')
  );
})

ReactDOM.render(
  <Reagieren.StrictMode>
    <Anzahl />
  </React.StrictMode>,
  document.getElementById('root')
);

Obwohl die obige Methode die Funktion des Zählers realisieren kann, kann sie offensichtlich nicht in tatsächlichen Projekten verwendet werden, da sich Komponenten im Allgemeinen in separaten Dateien befinden und diese Methode offensichtlich nicht auf den Store in anderen Komponenten zugreifen kann.

Counter Case Code-Optimierung – den Shop global erreichbar machen

Um das Store-Akquisitionsproblem zu lösen, müssen wir React-Redux verwenden, um dieses Problem zu lösen. React-Redux stellt uns Providerkomponenten und Verbindungsmethoden zur Verfügung.

Komponente bereitstellen

Es handelt sich um eine Komponente, die den erstellten Store an einem globalen Ort platzieren kann, sodass die Komponente den Store abrufen kann. Durch die Providerkomponente wird der Store an einem Ort platziert, den die globale Komponente erreichen kann. Der Provider verlangt von uns, ihn in der äußersten Komponente zu platzieren.

verbinden

connect hilft uns, den Status im Store zu abonnieren und Komponenten neu zu rendern, wenn sich der Status ändert

Über die Connect-Methode können wir den Status im Store abrufen und ihn den Props zuordnen.

Die Dispatch-Methode kann über die Connect-Methode abgerufen werden.

Der Parameter von connect ist eine Funktion, die den Status im Store abrufen kann. Dies erfordert, dass diese Funktion ein Objekt zurückgibt. Der in dieses Objekt geschriebene Inhalt wird der Props-Eigenschaft der Komponente zugeordnet.

Nach dem Connect-Aufruf wird eine Funktion zurückgegeben. Diese Funktion muss übergeben werden, um Connect mitzuteilen, welchen Komponenteneigenschaften eine Zuordnung zugewiesen werden muss.

Erstellen Sie einen neuen Komponentenordner und eine Count.js-Datei

React von „react“ importieren

Funktion Zählen() {
    Rückgabewert <div>
        <button onClick={() => store.dispatch(inkrementieren)}>+</button>
        {store.getState().count}
        <button onClick={() => store.dispatch(decrement)}>-</button>
    </div>
}

Export-Standardanzahl

Führen Sie die Provider-Komponente ein, platzieren Sie sie in der äußersten Schicht und definieren Sie den Store

ReactDOM.render(
  // Verwenden Sie die Providerkomponente, um den Store dort zu platzieren, wo die globale Komponente ihn erreichen kann. Der Provider verlangt von uns, ihn in die äußerste Komponente <Provider store={store}><Count /></Provider> zu platzieren.
  document.getElementById('root')
);

Führen Sie die Verbindungsmethode ein, um die Komponente entsprechend der Verwendung von Connect zu umschließen

const mapStateProps = Zustand => ({
    Anzahl: Status.Anzahl,
    eine: '1'
})
// Der Parameter von connect ist eine Funktion. Diese Funktion kann den Status im Store abrufen. Sie erfordert, dass diese Funktion ein Objekt zurückgibt. Der in dieses Objekt geschriebene Inhalt wird der Props-Eigenschaft der Komponente zugeordnet. // Nach dem Connect-Aufruf wird eine Funktion zurückgegeben. Die zurückgegebene Funktion muss übergeben werden, um connect mitzuteilen, welchen Props der Komponente zugeordnet werden müssen.
Standardmäßig exportieren verbinden(mapStateProps)(Anzahl)

Ändern Sie die Count-Komponente und kopieren Sie die Aktion in diese Datei

konstantes Inkrement = {
    Typ: „Inkrement“
}

const decrement = {
    Typ: „Dekrement“
}
Funktion Count({Anzahl, Versand}) {
    Rückgabewert <div>
        <button onClick={() => {Versand(Inkrement)}}>+</button>
        <span>{Anzahl}</span>
        <button onClick={() => {dispatch(decrement)}}>-</button>
    </div>
}

Nun ist das Projekt lauffähig, allerdings beeinträchtigt der lange Code der Submit-Aktion in der Count-Komponente die Lesbarkeit der Ansicht, so dass der Code noch optimiert werden muss.

Gegenfall-Codeoptimierung - den Code in der Ansicht lesbarer machen

Wir hoffen, eine Funktion direkt in der Ansicht aufrufen zu können, damit der Ansichtscode lesbar ist. Dies erfordert die Verwendung des zweiten Parameters von connect, einer Funktion, deren Parameter die Dispatch-Methode ist. Diese Funktion muss ein Objekt zurückgeben. Der Inhalt des zurückgegebenen Objekts wird der Props-Eigenschaft der Komponente zugeordnet.

Deklarieren Sie eine Variable als zweiten Parameter in connect und geben Sie das Objekt zurück, das verschiedene Aktionsoperationen in dieser Variablen ausführt

// Der zweite Parameter von connect ist eine Funktion. Der Parameter dieser Funktion ist die Dispatch-Methode. Sie erfordert die Rückgabe eines Objekts. Die Eigenschaften dieses Objekts werden den Eigenschaften der Komponente zugeordnet. const mapDispatchToProps = dispatch => ({
    inkrementieren () {
        versenden({
            Typ: „Inkrement“
        })
    },
    dekrementieren (){
        versenden({
            Typ: „Dekrement“
        })
    }
})

// Der Parameter von connect ist eine Funktion. Diese Funktion kann den Status im Store abrufen. Sie erfordert, dass diese Funktion ein Objekt zurückgibt. Der in dieses Objekt geschriebene Inhalt wird der Props-Eigenschaft der Komponente zugeordnet. // Nach dem Connect-Aufruf wird eine Funktion zurückgegeben. Die zurückgegebene Funktion muss übergeben werden, um connect mitzuteilen, welchen Props der Komponente zugeordnet werden müssen.
Standardmäßig exportieren verbinden(mapStateProps, mapDispatchToProps)(Anzahl)

Strukturieren Sie Requisiten in Komponenten und binden Sie Ereignisse direkt in Ansichten

Funktion Zählen({Anzahl, Inkrement, Dekrement}) {
    Rückgabewert <div>
        <button onClick={increment}>+</button>
        <span>{Anzahl}</span>
        <button onClick={decrement}>-</button>
    </div>
}

Durch diese Optimierung haben wir festgestellt, dass der Code zum Aufrufen von Dispatch zum Auslösen der Aktion wiederholt wird. Daher müssen wir ihn weiter optimieren.

Optimieren Sie die Codeduplizierung in der Methode, die Dispatch aufruft, um eine Aktion auszulösen

Verwenden Sie bindActionCreators, um den Vorgang des Auslösens von Aktionen zu vereinfachen. bindActionCreators hilft uns beim Generieren von Funktionen zum Ausführen von Aktionen.

bindActionCreators hat zwei Parameter, der erste Parameter ist das Objekt, das die Aktion ausführt, und der zweite Parameter ist die Dispatch-Methode

Trennen Sie den Aktionsvorgang, erstellen Sie eine neue Datei store/actions/counter.actions.js, fügen Sie den Aktionsvorgang separat in diese Datei ein und exportieren Sie sie

export const increment = () => ({Typ: 'Inkrement'})
export const decrement = () => ({Typ: 'decrement'})

Importieren Sie die Zähleraktion in Count.js und verwenden Sie die Methode bindActionCreators, um die Funktion für die Dispatch-Ausführungsaktion zu generieren

importiere { bindActionCreators } von 'redux'
importiere * als counterActions aus './../store/actions/counter.actions'


const mapDispatchToProps = dispatch => (bindActionCreators(counterActions, dispatch))
// Der Parameter von connect ist eine Funktion. Diese Funktion kann den Status im Store abrufen. Sie erfordert, dass diese Funktion ein Objekt zurückgibt. Der in dieses Objekt geschriebene Inhalt wird der Props-Eigenschaft der Komponente zugeordnet. // Nach dem Connect-Aufruf wird eine Funktion zurückgegeben. Die zurückgegebene Funktion muss übergeben werden, um connect mitzuteilen, welchen Props der Komponente zugeordnet werden müssen.
Standardmäßig exportieren verbinden(mapStateProps, mapDispatchToProps)(Anzahl)

An diesem Punkt der Codeoptimierung haben wir festgestellt, dass der Redux-Code in die Komponenten integriert ist, sodass ich ihn in unabhängige Komponenten aufteilen muss. Warum sollte ich Redux extrahieren? Weil wir unsere Codestruktur sinnvoller gestalten wollen

Refaktorisieren Sie den Zähler und extrahieren Sie den Redux-bezogenen Code

Extrahieren Sie die Reducer-Funktion in eine separate Datei und extrahieren Sie die Store-Erstellung in eine separate Datei

Da wir sowohl im Reducer als auch in den Aktionen Zeichenfolgen geschrieben haben, es aber keine Eingabeaufforderung für die Zeichenfolge gibt, definieren wir die Zeichenfolge als Konstante, um zu verhindern, dass wir Fehler auf niedriger Ebene wie Wortfehler machen. Erstellen Sie eine neue Datei src/store/const/counter.const.js

export const INCREMENT = "Inkrement"
export const DECREMENT = "Dekrement"

Erstellen Sie eine neue Datei src/store/reducers/counter.reducers.js und extrahieren Sie die Reducer-Funktion in diese Datei

importiere { INCREMENT, DECREMENT} von './../const/counter.const'
const initialState = {
    Anzahl: 0
}
// eslint-disable-next-line-import/kein-anonymer-Standardexport
export default (Status = Anfangsstatus, Aktion) => {
    Schalter (Aktion.Typ) {
        Fallinkrement:
            zurückkehren {
                Anzahl: Status.Anzahl + 1
            }
        Fallabnahme:
            zurückkehren {
                Anzahl: Status.Anzahl - 1
            }

        Standard:
            Rückgabestatus
    }
}

Ändern Sie die Zeichenfolge in Aktionen in eine importierte Variable

importiere { INCREMENT, DECREMENT} von './../const/counter.const'

export const increment = () => ({Typ: INCREMENT})
export const decrement = () => ({Typ: DECREMENT})

Erstellen Sie eine Datei src/store/index.js, erstellen Sie einen Store in dieser Datei und exportieren Sie ihn

importiere { createStore } von „redux“;
Reducer aus „./reducers/counter.reducers“ importieren

exportiere const store = createStore(Reducer)

Ändern Sie in der Datei, die den Store importiert, diese so, dass der Store in die Store-Datei im Projekt importiert wird.

importiere React von „react“;
importiere ReactDOM von „react-dom“;
importiere Count aus „./components/Count“;
importiere { store } aus './store'
importiere { Provider } von 'react-redux'
/**
 * react-redux ist eine perfekte Kombination aus react und redux * Provider ist eine Komponente, die den erstellten Store an einem globalen Ort platzieren kann, sodass Komponenten auf den Store zugreifen können
* connect ist eine Methode */


ReactDOM.render(
  // Verwenden Sie die Providerkomponente, um den Store dort zu platzieren, wo die globale Komponente ihn erreichen kann. Der Provider verlangt von uns, ihn in die äußerste Komponente <Provider store={store}><Count /></Provider> zu platzieren.
  document.getElementById('root')
);

Übergeben von Parametern an die Aktion, Erweitern des Zählerfalls

Dieses Zählerbeispiel hat die Operation zum Addieren oder Subtrahieren von eins durch Klicken auf eine Schaltfläche implementiert. Jetzt gibt es eine neue Anforderung, dass wir einen Wert addieren oder subtrahieren müssen, z. B. das Addieren von fünf oder das Subtrahieren von fünf.

Hierzu müssen Parameter an die Aktion übergeben werden

In der Ansicht bindet die Schaltfläche die Funktion zur Übergabe von Parametern

Funktion Zählen({Anzahl, Inkrement, Dekrement}) {
    Rückgabewert <div>
        <button onClick={() => inkrement(5)}>+</button>
        <span>{Anzahl}</span>
        <button onClick={() => dekrementieren(5)}>-</button>
    </div>
}

Wenn Dispatch eine Aktion ausführt, akzeptiert es Parameter und übergibt sie an die Aktion

export const increment = Nutzlast => ({Typ: INCREMENT, Nutzlast})
export const decrement = Nutzlast => ({Typ: DECREMENT, Nutzlast})

Parameter in Reduzierern empfangen und entsprechend verarbeiten

export default (Status = Anfangsstatus, Aktion) => {
    Schalter (Aktion.Typ) {
        Fallinkrement:
            zurückkehren {
                Anzahl: Status.Anzahl + Aktion.Nutzlast
            }
        Fallabnahme:
            zurückkehren {
                Anzahl: Status.Anzahl – Aktion.Nutzlast
            }

        Standard:
            Rückgabestatus
    }
}

Original-URL: https://kspf.xyz/archives/10/

Dies ist das Ende dieses Artikels über die Verwendung von Redux in React und die Implementierung eines Counter-Falls. Weitere relevante Inhalte zur Implementierung eines React-Redux-Counters finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!