Erklärung der Funktionsweise und Verwendung von Redux

speichern.Versand(Aktion);

let nächsterZustand = todoApp(vorherigerZustand, Aktion);

//Abhörfunktion festlegen store.subscribe(listener);

Funktion Listener () {
  Lassen Sie newState = store.getState();
  Komponente.setState(newState);   
}

//createStore einführen, das speziell zum Erstellen des Core Store-Objekts in Redux verwendet wird. importiere {createStore, applyMiddleware} von 'redux'.
//Stellen Sie den Reducer vor, der die Count-Komponente bedient
importiere countReducer aus './count_reducer'
//Führen Sie Redux-Thunk ein, um asynchrone Aktionen zu unterstützen
Thunk von „Redux-Thunk“ importieren
//Den Laden freilegen  
//applyMiddleware ist die mittlere Position mit Thunk
exportiere standardmäßig createStore(countReducer,applyMiddleware(thunk))

const initState = 0 //Initialisierungsstatus exportiere Standardfunktion countReducer(preState=initState,action){
	// Konsole.log(preState);
	//Vom Aktionsobjekt abrufen: Typ, Daten
	const {Typ, Daten} = Aktion
	//Entscheiden Sie, wie die Daten basierend auf dem Typschalter (Typ) verarbeitet werden sollen {
		Fall 'Inkrement': //wenn es hinzugefügt werden soll, returniere preState + Daten
		case 'decrement': //Wenn es eine Verringerung ist, returniere preState - data
		Standard:
			Vorstatus zurückgeben
	}
}

// öffentlicher index.js
Store aus „./redux/store“ importieren

//subscribe aktualisiert die Daten, wenn sich die Daten im Store ändern. Wenn Sie es hier schreiben, wird der globale store.subscribe(()=>{
	ReactDOM.render(<App/>,document.getElementById('root'))
})

//Count-UI-Komponente importieren importiere CountUI von '../../components/Count'

//Führen Sie Connect ein, um UI-Komponenten und Redux zu verbinden
importiere {connect} von 'react-redux'

-------------------------------------------------------------
/* 
	1. Die Funktion mapStateToProps gibt ein Objekt zurück;
	2. Der Schlüssel im zurückgegebenen Objekt wird als Schlüssel verwendet, der an die UI-Komponenteneigenschaften übergeben wird, und der Wert wird als Wert verwendet, der an die UI-Komponenteneigenschaften übergeben wird
	3.mapStateToProps wird verwendet, um den Status zu übergeben*/
Funktion mapStateToProps(Zustand){
	returniere {Anzahl:Zustand}
}
-----------------------------------------------------------------
/* 
	1. Die Funktion mapDispatchToProps gibt ein Objekt zurück;
	2. Der Schlüssel im zurückgegebenen Objekt wird als Schlüssel verwendet, der an die UI-Komponenteneigenschaften übergeben wird, und der Wert wird als Wert verwendet, der an die UI-Komponenteneigenschaften übergeben wird
	3.mapDispatchToProps wird verwendet, um die Operationsstatusmethode zu übergeben*/
Funktion mapDispatchToProps(dispatch){
	zurückkehren {
		jia:Nummer => Versand(ErstelleIncrementAction(Nummer)),
		jian:Nummer => Versand(erstelleDekrementaktion(Nummer)),
		jiaAsync:(Zahl,Zeit) => dispatch(createIncrementAsyncAction(Zahl,Zeit)),
	}
}
//Verwenden Sie connect()(), um eine Count-Containerkomponente zu erstellen und verfügbar zu machen. Exportieren Sie standardmäßig connect(mapStateToProps,mapDispatchToProps)(CountUI).
//Verbesserte Standardverbindung für den Export(
	Zustand => ({Anzahl:Zustand}),
	
	//Allgemeines Schreiben von mapDispatchToProps /* dispatch => ({
		jia:Nummer => Versand(ErstelleIncrementAction(Nummer)),
		jian:Nummer => Versand(erstelleDekrementaktion(Nummer)),
		jiaAsync:(Zahl,Zeit) => dispatch(createIncrementAsyncAction(Zahl,Zeit)),
	}) */

	//Abkürzung für mapDispatchToProps {
		jia:createIncrementAction,
		jian:ErstelleDekrementAktion,
		jiaAsync:createIncrementAsyncAction,
	}
)(Zählen)

/* 
	Diese Datei wird speziell zum Generieren von Aktionsobjekten für die Count-Komponente verwendet*/
importiere {INCREMENT,DECREMENT} von '../constant'

//Synchronisierte Aktion bedeutet, dass der Wert der Aktion ein allgemeines Objekt vom Typ Object export const increment = data => ({type:INCREMENT,data}) ist.
exportiere const decrement = Daten => ({Typ:DECREMENT,Daten})

//Asynchrone Aktion bedeutet, dass der Wert der Aktion eine Funktion ist. Asynchrone Aktion ruft normalerweise synchrone Aktion auf, aber asynchrone Aktion ist nicht erforderlich.
export const incrementAsync = (Daten, Zeit) => {
	Rückkehr (Versand) => {
		setzeTimeout(()=>{
			Versand(Inkrement(Daten))
		},Zeit)
	}
}