wie und Wann ein Anruf reagieren Komponente Methoden nach Zustand zu ändern, von redux

In einem einzigen reagieren Komponente ein Benutzer auf eine Schaltfläche klickt, => das ruft eine Methode => löst eine Aktion aus => async Holen => reducer updates state => Komponente erhält neue Requisiten.

zurück in die ursprüngliche Komponente, die der Auslöser für die Aktion, die ich verwendet haben:

componentWillReceiveProps(nextProps){
    if(nextProps.someProp !== this.props.someProp){
        //ok new prop is here
        this.someMethod(nextProps.someProp);
    }
}

Werde ich über diese in der richtigen Weise?

Es scheint nur etwas klobig und fast wie ein callback-Mechanismus vom Benutzer-Aktion oder Zustandsänderung. Es macht einfach nach dem logischen Ablauf der härter-Komponente einmal gibt es ein paar von diesen, ich habe eine Komponente, mit 3 von diesen und denke schon es ist nicht so einfach zu Grunde geht, insbesondere, wenn Sie Teil eines zusammenhängenden flow a > b > c . Und ich landete mit dieser Art der Sache:

componentWillReceiveProps(nextProps){

    if(this.patchJavaScriptWillLoad(nextProps)){
        this.createPatchInstance();
        //method fires an action which will also result in state change that triggers the below.
    }

    if(this.patchInstanceWillBeReady(nextProps)){
        this.startPatchAudio(nextProps.webAudioPatch.instance);
        //method fires an action which will also result in state change that triggers the below.
    }

    if(this.patchParametersWillChange(nextProps)){
        this.updateWebAudioPatchParameters(nextProps.webAudioPatchParameters);
    }
}

//abstracted away if conditions to make componentWillReceiveProps more readable.

Aber ist dies, wie es getan werden sollte, oder ist das ein symptom der sich nicht bewegt, genug Logik um den action-Machern?

Nicht wissen, die Besonderheiten Ihrer Funktionen, die es wäre schwer zu beurteilen, aber es fühlt sich, dass Sie Ihre callback-Logik bewegt werden kann, um den action-Machern, vor allem, wenn Sie mit redux-thunk.
componentWillReceiveProps ist immer veraltet. Nachschlagen getDerivedStateFromProps

InformationsquelleAutor njorlsaga | 2016-07-25

4

Genauere Beispiele wären nützlich, aber basierend auf dem, was Sie hier haben, ich denken ich sehen, was Sie bekommen in.

Kurze Antwort: ja, dies ist ein symptom der sich nicht bewegt, genug Logik, um den action-Machern. Ideal, Ihr Komponente sollte eine Reine view-Komponente. Keine Notwendigkeit für componentWillReceiveProps in den meisten Fällen - einfach Rendern, was die Requisiten sind und das ist, dass. Dies ist der Grund, warum Abramov (Schöpfer von redux) plädiert für eine funktionale Komponenten. Mehr auf, dass hier.

Wenn Sie brauchen, um andere Aktionen durchführen, nachdem ein asynchroner Aufruf gibt einige Daten, die Sie würde tun, wie Sie sagten, in der action-Schöpfer. Ich werde gehen mit einem Beispiel, das verwendet thunks:

EDIT: ich fügte hinzu, ein Beispiel für die Komponente übergeben Sie einen Verweis auf die audio-player-als argument an die Aktion. So, die Aktion manipulieren können, nach dem asynchronen Schritt.
```
//An async action creator that uses the thunk pattern.
//You could call this method from your component just like any other
//action creator.

export function getMaDatums(audioPlayer, audioContext) {
  return function (dispatch) {

    //make the actual call to get the data
    return fetch(`http://<your stuff here>`)
      .then(data => {

        //call dispatch again to do stuff with the data
        dispatch(gotDataAction(data));

        //call dispatch some more to take further actions
        dispatch(...);

        //since the component passed us references to these, we can
        //interact with them here, after our data has loaded! FTW!
        audioPlayer.doTheThings();
        audioSession.doTheOtherThings();

        //plus anything else you want...
      });
  }
}
```
Wenn du mehr erfahren möchtest über die async-Zeug mit redux, oder für diese Angelegenheit, das zusammenspiel mit stateful-Bibliotheken von Ihrem redux app, empfehle ich geben die redux-Dokumentation gut zu Lesen. Die Grundlage der thunk Beispiel oben kam von hier.

Gutes Glück und haben Spaß mit Reagieren + Redux!
- Sie ist ma Bezüge!
- danke, ja ich bin schon mit redux-thunk, ich denke, das Problem ist, dass die Komponente muss für die Kommunikation mit der dom-api, die zwischen den Aktionen. In meinem Fall ist dies mit der web-audio-api, die gebunden ist, um eine dom-Audio-element, das innerhalb der Komponente. Und ich habe dann in der Lage sein müssen übergeben Sie die Audio-Kontext, um wie ein singleton. Ich kann verstehen, dass die argument für funktionale Komponenten im Präsentations-Komponenten, aber ich bin mir nicht sicher, wie dies zu erreichen, in höherer Ordnung-Komponenten / smart / Container.
- In diesem Fall würde ich prüfen, übergeben Sie einen Verweis, um Ihre audio-player, die als argument an die Aktion. Soweit die Weitergabe der audio-Kontext, um wie ein singleton, Sie könnten in der Lage sein zu entwerfen, um, dass, wenn Sie übergeben es an die entsprechenden Aktionen als ein argument als gut. Ich bearbeitet habe, die Antwort zu demonstrieren - nicht, dass Sie überhaupt helfen?
- danke, ja, die heikle Sache ist aber, dass die audio-Kontext gehalten werden muß irgendwo als Referenz, wie es genannt wird, von anderen Dinge zu unterschiedlichen Zeiten (disconnect - reconnect, Quellen, etc..), aktuell bin ich der Speicherung in redux Staat, aber es fühlt sich ein bisschen schmutzig, wie ich bin sicher, dass die Referenz nicht änderbar. Aber danke für deine Hilfe, es bestätigt einige meiner Vermutungen, hoffentlich kann ich umgestalten, einige Telefonate innerhalb componentWillReceiveProps sich um ein action-Schöpfer.
- Glücklich zu helfen, und froh, das war nützlich für Sie. Vielleicht könnten Sie eine Start-Aktion, dass an die audio-context in der action, und haben dann eine middleware, die überwacht, dass die Aktion und speichert eine lokale Referenz auf den Kontext. Dann die middleware hören könnte, für andere Aktionen (kommen von überall in der app) und führen Sie die notwendigen Manipulationen an den Kontext. So erhalten Sie den audio-Kontext-out-of-state-Baum, und noch einen einzigen Verweis für ihn.
- ah, dass ist interessant, ich habe nicht geschrieben, middleware, und noch nicht daran gedacht, dass, nur verwendet 3rd-party-wie redux-thunk-ich werde prüfen, ob aus. Ich brauche etwas mehr Forschung zu tun in diesem Bereich, was die Konvention ist die Speicherung von Referenzen oder eine Schnittstelle mit dieser Art von Instanzen wie der navigator.getUserMedia etc. in der darauf reagiert-redux-ökosystem .
InformationsquelleAutor Ian
1

Ein update verursacht werden kann, durch änderungen an Requisiten oder Staat. Diese Methoden sind in der folgenden Reihenfolge aufgerufen, wenn eine Komponente neu gerendert:
- statische getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
  Versuchen componentDidUpdate()
Reagieren docs https://reactjs.org/docs/react-component.html#updating

InformationsquelleAutor Yarik Kovalchuk

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.