Detaillierte Erläuterung des grundlegenden Falls des React.js-Frameworks Redux

react.js Rahmen Redux

https://github.com/reactjs/redux

Installieren:

npm installiere Redux react-redux
#Basierend auf React haben wir es bereits zuvor installiert

Redux-Referenzdokumentation:
http://redux.js.org/

Redux-Kernkonzept: Speichern

Wir können es einfach so verstehen, dass es dazu verwendet wird, State jeder Komponente oder den von Ihnen selbst definierten unabhängigen Status zu speichern und einheitliche Vorgänge wie das Lesen, Aktualisieren und Überwachen des Status auszuführen.
http://redux.js.org/docs/basics/Store.html

Reduzieren

Der Beamte teilt uns mit, dass die grundlegende Verwendung von Redux wie folgt ist:

importiere {createStore} aus "redux";
importiere todoApp aus "./reducers";
let store = createStore(todoApp);

Der an createStore() übergebene Parameter ist eine Funktion Function.
Das Konzept in Redux heißt: Reduzieren
Die Grundform von Reduce ist:

Funktion myFun(Zustand,Aktion){
  // ...
}

Natürlich können wir zur Definition auch die Pfeilfunktionsform von esmascript 2015 verwenden.

Praktische Übung

1. Definieren wir zunächst ein Reduce

InfoReduce.js:

//Testdaten let info = {
    Titel:"Testtitel",
    Klickzahl:0
};

// Exportiere die Daten über den Parameter hull default (state = info, action)=>{


    return state; //Der zurückgegebene Wert sind die Testdaten}

2. Reduce ist bereit, beginnen wir mit der Verwendung von Redux

importiere InfoReduce aus "./../redux/InfoReduce";

importiere {createStore} aus "redux";
Lassen Sie uns speichern = createStore(InfoReduce);

3. Der sehr wichtige Concept store in Redux wurde erstellt. Sehen wir uns an, wie er in der Komponente verwendet wird.

// Definieren Sie eine Komponente namens InfoDetail. Klasse InfoDetail erweitert React.Component{
    //Konstruktor(Requisiten) {
        super(Requisiten);
        // Anfangszustand this.state = {
            infoData:store.getState() //Daten über die Store-Objektmethode abrufen};
      }


        machen(){
            Rückgabewert <div>
                <h2>Nachrichtentitel: {this.state.infoData.title}</h2>
                <span>Anzahl der Klicks: {this.state.infoData.clicknum}</span>
                <p><button>Klicklautstärke ändern</button></p>
            </div>
        }
}

Holen Sie sich Daten über store.getState() .

An diesem Punkt haben wir im Wesentlichen Folgendes verstanden: Reducers ist eine angegebene Funktion, die einen neuen Status generiert und ihn an den Store übergibt; unsere Komponenten erhalten den Status über den Store, um die Komponentendaten zu aktualisieren.

Aktionen verstehen

Die offizielle Dokumentation zur action :
http://redux.js.org/docs/basics/Actions.html

Tatsächlich lässt das Wort „Aktion“ vermuten, dass es sich um eine Operation zur Geschäftsabwicklung handelt.

Wo ist action in unserem vorherigen Code?
Wenn wir die Reducer-Funktion definieren, ist der zweite Parameter:

export default (status, aktion)=>{}

1. Da die Aktion eine Operation ist, bedeutet dies, dass wir sie in der Ereignisbehandlungsfunktion der Komponente benötigen

<button onClick={this.addClick.bind(this)}>Klickanzahl ändern</button>

Binden Sie eine Klickereignisfunktion addClick an die Schaltfläche

2. Sehen wir uns an, was in der Funktion „addClick“ passiert.

        Klick hinzufügen(){
            //Zustand ändern
            speichern.Versand({
                Typ: „INFO_CLICK“
            })

            this.setState({ //Status aktualisieren
                infoData:store.getState()
            })
        }

this.setState() Wir haben zuvor gelernt, dass dies zum Aktualisieren des Status verwendet wird;
store.dispatch() ist etwas in unserem Redux. Diese Methode versendet tatsächlich action .
Nach Typ unterscheiden.

3. Entsprechend unseren Anforderungen besteht die Geschäftslogik, die unsere Aktion verarbeiten muss, darin, die Klickzahl zu erhöhen

//Testdaten let info = {
    Titel:"Testtitel",
    Klickzahl:0
};

// Exportiere die Daten über den Parameter hull default (state = info, action)=>{

    wenn (Aktion.Typ == "INFO_CLICK"){
        sei oldNum = state.clicknum;
        alteNummer++;

        // Neue Daten zurückgeben return Object.assign({},state,{clicknum:oldNum});
    }

    return state; //Der zurückgegebene Wert sind die Testdaten}

In unserer Reducer-Funktion verwenden wir action.type , um die Geschäftslogik zu beurteilen und dann zu verarbeiten.

An diesem Punkt sind wir möglicherweise verwirrt, warum Redux immer noch Probleme bereitet. Ja, es wird im Allgemeinen in Projekten mit komplexer Geschäftslogik verwendet.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des grundlegenden Falls von Redux im react.js-Framework. Weitere relevante grundlegende Inhalte zu Redux im react.js-Framework finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!