So warten Sie auf bestimmte Eigenschaftsänderungen im Redux-Speicher, nachdem eine Aktion ausgelöst wurde


76

Ich versuche derzeit zu konzipieren, wie das Versenden einer Aktion in einer Komponente basierend auf einer Datenänderung nach einem Versenden in einer anderen Komponente behandelt wird.

Nehmen Sie dieses Szenario:

dispatch(someAjax) -> Eigenschaft in Statusaktualisierungen.

Danach benötige ich eine weitere Komponente, die von derselben Eigenschaft abhängig ist, um zu wissen, dass sie aktualisiert wurde, und um eine Aktion basierend auf dem neuen Wert auszulösen.

value.on(change...Was ist der bevorzugte Weg, um mit dieser Art von Aktion "Kaskadierung" umzugehen, anstatt irgendeine Art von Lösung zu verwenden?

Antworten:


62

Es gibt zwei grundlegende Ansätze: entweder eine Middleware, die den Status nach Abschluss einer Aktion ändert, oder die Verwendung der Low-Level- store.subscribeAPI von Redux .

Die Redux-FAQ enthält eine Antwort, die dies abdeckt . Außerdem führe ich eine kategorisierte Liste von Redux-bezogenen Addons und Dienstprogrammen, die eine Gruppe vorhandener Abonnementbibliotheken für Geschäftsänderungen enthält , die verschiedene Ansätze zum Abhören von Datenänderungen implementieren.


1
Danke für diese Liste, es ist wirklich hilfreich. Was ich tatsächlich herausfinden möchte, ist der beste Weg, um mehrere Komponenten darüber zu informieren, dass einige Daten von einem AJAX-Aufruf zurück sind und dass sich die X-Taste geändert hat. Jede dieser Komponenten würde dann möglicherweise ihre eigenen Aktionen auslösen. Ich kann auf die Änderungen in der Middleware zugreifen, aber der Teil, den ich herausfinden möchte, ist, was zu tun ist, wenn die Änderung erkannt wird. Ich habe das Gefühl, dass eine Art Eventbus benötigt wird, aber das fühlt sich bei Redux nicht richtig an. Irgendwelche Ratschläge dort?
Jazzy

1
Der primär empfohlene Kommunikationsansatz in React and Redux besteht darin, dass Eltern Requisiten an Kinder weitergeben und Kinder Rückrufe ausführen, um die Eltern zu benachrichtigen. Andere Ansätze wie Eventbusse haben jedoch sicherlich ihre Verwendung, und wenn ein Eventbus zu Ihrem Anwendungsfall passt, entscheiden Sie sich dafür. Beispiele finden Sie unter ctheu.com/2015/02/12/… und andrewhfarmer.com/component-communication .
markerikson

4
Obwohl Sie die Frage nicht speziell beantwortet haben, hat der erste Punkt auf Ihrer Liste für meinen Fall funktioniert. Redux-Watch ist eine einfache und kreative Möglichkeit, diese Funktionalität zu erhalten. Nochmals vielen Dank für die Liste, es ist hilfreich.
Jazzy

Ja, ich habe kürzlich die FAQ-Seite in separate Seiten pro Kategorie aufgeteilt. Habe gerade den Link in meiner Antwort aktualisiert. Vielen Dank!
Markerikson

98

Sie können Redux mapStateToPropsund connectmit React's componentDidUpdate(prevProps, prevState, snapshot)Hook verwenden.

Im Grunde könnte Ihr Code so aussehen:

const mapStateToProps = (state) => ({ 
   specificProperty: state.specificProperty,
   // any props you need else
});

class YourComponent extends React.Component {
    render() {
      // render your component  
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.specificProperty !== this.props.specificProperty) {
            // Do whatever you want
        }
    }
}

YourComponent = connect(mapStateToProps)(YourComponent);

2
Passt dann zu den bereitgestellten Tags
hellogoodnight

2
Nett. Auch möglicher Tippfehler? Meinst du nextProps.specificProperty !== this.props.specificProperty?
Python1981

1
@BrunoCarvalhal, wenn Sie nicht reagieren verwenden, gibt es wahrscheinlich eine bessere Option, abhängig von Ihrem JS-Framework, als Redux;)
FabienChn

4
Kleinere Aktualisierungen componentWillUpdatesollten nicht mehr mit React 16 verwendet werden. GetDerivedStateFromProps ist jetzt der empfohlene Ansatz.
Wootencl

4
Kommt darauf an - könnte sein, getDerivedStateFromPropswenn Sie einen neuen Status wünschen, aber Sie möchten ihn componentDidUpdatefür ein bisschen mehr Vielseitigkeit verwenden.
Jonny Rathbone
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.