Verstehen Sie die anfängliche Verwendung von Redux in React in einem Artikel

importiere React, {Komponente, Fragment} von „react“;

//Klasse importimport { connect } von „react-redux“;

//Hook import { useSelector, useDispatch } von 'react-redux'

importiere { füge hinzu, lösche } von '../../redux/actions/count';


//Anzeigekomponente einhaken const CountItem = (props) => {
    // Dekonstruieren const {
        zählen,
        Flagge,
        hinzufügen,
        klar
    } = Requisiten
    zurückkehren (
        <>
            <h2>Aktuelle Summe: {count}</h2>
            <h3>Aktuelle Flagge: {flag ? 'true' : 'false'}</h3>
            <button onClick={add}>Klick +1</button>
            <button onClick={clear}>Löschen</button>
        </>
    )
}

//Containerkomponente einhaken const Count = () => {
    const count = useSelector(Zustand => Zustand.Summe)
    const flag = useSelector(Zustand => Zustand.flag)
    const dispatch = useDispatch()

    const countAdd = () => {
        Konsole.log(Typ hinzufügen)
        Versand(Hinzufügen(1))
    }

    const clearNum = () => {
        Versand (löschen ())
    }

    zurückgeben <CountItem count={Anzahl} flag={Flag} add={countAdd} clear={clearNum} />
}

Export-Standardanzahl



// Klasse Anzeigekomponente // Klasse Count erweitert Komponente {
// hinzufügen = () => {
// // Redux benachrichtigen
// diese.props.add(1);
// };
// löschen = () => {
// diese.props.clear();
// };
// rendern() {
// zurückkehren (
// <Fragment>
// <h2>Die aktuelle Summe ist: {this.props.count}</h2>
// <h3>Aktuelle Flagge: {this.props.flag ? 'true' : 'false'}</h3>
// <button onClick={this.add}>Klick +1</button>
// <button onClick={this.clear}>löschen</button>
// </Fragment>
// );
// }
// }

// Klasse Containerkomponente // Standardverbindung exportieren(
// // 1. Status// Status => ({ Anzahl: Status.Summe, Flagge: Status.FlagStatus }),
// // 2. Methoden // { hinzufügen, löschen }
// )(Zählen);

// Ein Aktionsobjekt für die Komponente „Count“ erstellen // Konstanten importieren import { ADD, CLEAR } from '../constant';

// Erstellen Sie eine Funktion zum Hinzufügen eines Aktionsobjekts export const add = data => ({
    Typ: ADD,
    Daten,
});

// Erstellen Sie eine Funktion zum Löschen des Aktionsobjekts export const clear = data => ({
    Typ: CLEAR,
    Daten,
});

export const ADD = "Hinzufügen";
export const CLEAR = "löschen";

//Erstellen Sie einen Reducer für die Count-Komponente
// Reducer erhält zwei Parameter: preState des vorherigen Status, Aktionsobjekt Aktion

importiere { ADD, CLEAR } aus '../constant.js';

// Den Anfangszustand festlegen const initState = 0;

Exportiere Standardfunktion addReducer(preState = initState, action) {
    // Typ und Daten aus Aktion abrufen
    const { Typ, Daten } = Aktion;
    //Entscheiden Sie, wie die Daten basierend auf dem Typschalter (Typ) verarbeitet werden sollen {
        Fall hinzufügen:
            gibt PreState + Daten zurück;
        Fall KLAR:
            gebe 0 zurück;
        // Initialisierungsaktion Standard:
            Vorstatus zurückgeben;
    }
}

importiere React von „react“;
importiere ReactDOM von „react-dom“;
App aus „./App.jsx“ importieren;
Store aus „./redux/store“ importieren;
importiere { Provider } von „react-redux“;

ReactDOM.render(
    // Provider umschließt App, Zweck: allen untergeordneten Containerkomponenten der App den Empfang von Store-Informationen zu ermöglichen
    <Anbieter-Store={Store}>
        <App />
    </Anbieter>,
    document.getElementById('root')
);

// Das gesamte Dokument hat nur ein Store-Objekt. createStore erhält zwei Parameter, der erste ist der Statusbaum und der zweite die zu verarbeitende Aktion.
//applyMiddleware fasst die gesamte Middleware in einem Array zusammen und führt sie nacheinander aus. Dabei wird import { createStore, applyMiddleware } from 'redux'; asynchron verarbeitet.
//Middlewareimport thunk von „redux-thunk“;
//Alle Reducer zusammenfassen
importiere alle Reducers aus „./reducers/index“;
//Hier ist das Debugging-Tool von Google, spezifische Verwendung: Baidu import { composeWithDevTools } from 'redux-devtools-extension';

// Den Laden sichtbar machen
exportiere Standard „createStore“ (alle Reducers, composeWithDevTools (applyMiddleware (thunk)));