Redux umsetzen Zugriff auf Status über die Funktion mapDispatchToProps ()

Hallo allerseits! Heute werden wir eine Lösung für ein ziemlich beliebtes Problem in Betracht ziehen - den Zugriff auf den Status von der Funktion mapDispatchToProps () der React -Redux-Anwendung aus zu erhalten.


Es ist ein typisches Komponentenbehälter (Entwicklungs Ideologie reagieren-redux Komponenten gelesen werden können hier ), die die Funktion erzeugt wird , unter Verwendung von connect () . Der Code wird im Folgenden dargestellt (ich veröffentliche einen Code zu diesem Thema):


const mapStateToProps = (state) => {
    return state.play;
};
const mapDispatchToProps = (dispatch) => {
    return {
        togglePlay: () => {
            dispatch(togglePlay());
        }
    }
};
const ButtonPlayComponentContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(ButtonPlayComponentView);

Alles ist hier einfach, wir definieren die Funktionen mapStateToProps () zum Lesen des Status und mapDispatchToProps () zum Senden des Ereignisses. Als Nächstes generieren wir die Komponente, indem wir die erstellten Funktionen an connect () übergeben .


Außerdem veröffentliche ich den Code der render () -Methode der Präsentationskomponente, um ein klareres Bild zu erhalten:


render() {
    return(
        
); };

Wenn Sie auf die Schaltfläche klicken, ändert sich normalerweise der Status, und je nach Status ändert sich die Klasse des Elements.


Aber jetzt erscheint die Aufgabe, wenn sich der Zustand ändert, diese oder jene Funktion zurückzugeben. Es scheint nicht schwierig zu sein, das Problem wird von einem gelöst, wenn , aber es gibt einen, aber . Wir haben keinen Zugriff auf state in der mapDispatchToProps () -Methode . Im Handumdrehen fällt Ihnen sofort eine Option ein: Stellen Sie mit der Methode getState () eine Anforderung an das Repository und rufen Sie den aktuellen Status ab. Aber diese Option hat mich mit seiner Dummheit verwirrt . Weil jede Bedeutung in der Funktion mapStateToProps verloren geht , die bereits für den Status verantwortlich ist.


Nachdem ich die Dokumentation für die connect () -Methode durchgesehen hatte ( diesmal sorgfältig), fand ich den mergeProps- Parameter :


connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]);

Auszug aus der Dokumentation zu diesem Parameter:


Sie können diese Funktion angeben, um ein Segment des Status basierend auf Requisiten auszuwählen oder um Aktionsersteller an eine bestimmte Variable aus Requisiten zu binden.

Wenn Sie wörtlich übersetzen, stellt sich jedoch heraus, dass diese Funktion es ermöglicht, den aktuellen Status abzurufen oder Ereignisse zu übertragen, indem unsere Aktion an eine Variable von Requisiten gebunden wird ( was mapDispatchToProps () tut ). Großartig, töte zwei Fliegen mit einer Klappe.


Als ich ein wenig über die Implementierung der mergeProps- Methode googelte , stieß ich auf eine Frage zu Github.


Als Ergebnis erhalten wir:


const mapStateToProps = (state) => {
    return state.play;
};
const mergeProps = (stateProps, dispatchProps) => {
    const { play } = stateProps;
    const { dispatch } = dispatchProps;
    const toggle = () => {
        dispatch(togglePlay());
        if (play != true) {
            this.playAction();
        } else {
            this.stopAction();
        }
    };
    return {
        play: play,
        togglePlay: () => {
            toggle();
        }
    };
};
const ButtonPlayComponentContainer = connect(
    mapStateToProps,
    null,
    mergeProps
)(ButtonPlayComponentView);

Auch hier ist alles einfach: stateProps kommen in mergeProps an , die den aktuellen Status enthalten, und dispatchProps , die das Senden eines Ereignisses ermöglichen. Als nächstes überprüfen wir durch Ausführen des Codes den Status, dessen Ergebnis die gewünschte Funktion ist, und geben ein Objekt mit dem aktuellen Status und dem Ereignis zurück, das sicher in die Requisiten unserer Ansichtskomponente fällt .


Wenn Sie Fehler finden, schreiben Sie, korrigieren Sie. Vielen Dank für Ihre Aufmerksamkeit.


Jetzt auch beliebt: