Wie reagieren Sie auf Status ändern, in der redux und Versand eine andere Aktion?

Kann mir jemand Hinweise, wie Sie haben folgende Möglichkeiten, zu reagieren-redux:

Komponente A löst eine Aktion aus, die updates der Staat (async)

Komponente B (nicht ein Kind Komponente A) muss in der Lage sein, zu erkennen, Wann der Status geändert und der Versand einer anderen Aktion.

Mein problem ist wenn ich versuche zu tun Versand Aktion 2 in component B, der Zustand ist noch im ursprünglichen Zustand und es wird nicht aktualisiert.

Ich habe auch versucht, Versand Aktion 2 in componentWillUpdate, jedoch, das wird eine unendliche Schleife, da die zweite Aktion auch updates der Staat (und auch asynchron)

Dies ist, wie es aussieht, mehr oder weniger:

//----- Component A
class ComponentA extends React.Component {
  constructor(props) {
    super(props);
    this.props.dispatch(loadEvents()); //loadEvents is async and will   update state.eventsState
  }
}

const mapStateToProps = function (state) {
  return {
    eventsState: state.eventsState,
  };
};

export default connect(mapStateToProps)(ComponentA);


//----- Component B
class ComponentA extends React.Component {
  constructor(props) {
    super(props);
    props.dispatch(getEventUsers(props.eventsState.eventId)); //the eventsState is in initial state here (empty)...where do I call getEventUsers?
  }

  componentWillUpdate(nextProps) {
    nextProps.dispatch(getEventUsers(props.eventsState.eventId)) //Creates an infinite loop, getEventUsers also updates state
  }
}

const mapStateToProps = function (state) {
  return {
    eventsState: state.eventsState,
  };
};

export default connect(mapStateToProps)(ComponentA);
  • Komponente B sollten nur berücksichtigen, die Zeit zwischen dem Start von Last und Belastung getan. Es könnte zeigen, ein spinner oder nichts (leere div). Auch wenn Ihr loadEvents reducer ist synchron, es gibt keine Garantie, es wird ausgelöst, ersten. Reagieren allein entscheidet, Wann es ruft verschiedene Funktionen wie shouldComponentUpdate und sogar Ihre Komponente Konstruktoren.
InformationsquelleAutor mvovchak | 2016-06-29

 

One Reply
  1. 3

    Ohne Blick auf Ihre Redux-code, würde ich sagen, dass die Komponente B ist immer leer Daten im Konstruktor, weil es instanziiert, etwa zur gleichen Zeit, die eine Komponente Ein, und an diesem Punkt wird der async-request initiiert durch die Komponente Ein Konstruktor ist noch im Gange.

    Ihre Redux soll eine Aktion auslösen, enthält die empfangenen Daten, wenn die asynchrone Anforderung abgeschlossen ist. Ihre reducer setzt dann diese Daten in den Staat, die wiederum Veränderungen der Requisiten Ihres angeschlossenen Komponenten und die Sie zwingt, ihn neu zu Rendern.

    Sollten Sie Versand getEventUsers nur als Requisiten.eventState.eventId vorhanden ist und sich verändert hat.

    • Das macht Sinn, danke! Wie würden Sie überprüfen, dass die Requisiten.eventState.eventId vorhanden ist? Sollte ich einfach vergleichen nextProps zu diesem.Requisiten in componentWillUpdate ?
    • Das problem mit nur der Vergleich dieser.Requisiten, um nextProps ist, dass, wenn Ihr eventUsers sind, die in Ihrer eventState erhalten Sie eine neue eventState Referenz beim laden von Benutzern, so dass Sie anders sein wird, obwohl das Ereignis ist das gleiche, wodurch eventUsers abgerufen werden, wieder. Vergleicht man die id stellt sicher, dass Sie wirklich auf der Suche auf einer anderen Veranstaltung. Dies könnte ein problem sein, wenn Sie wollen, um die Daten neu laden für das gleiche Ereignis an einem gewissen Punkt. Ich würde vorschlagen, normalisieren Sie Ihre Staat: halten Sie alle geladen, die Benutzer in einem separaten Objekt-mapping Ihre IDs zu user-Daten, dann finden Sie, die von ID in der event-Objekte.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.