Wie man auf Zustandänderung in redux reagiert und eine andere Aktion versendet?

Question

Kann mir jemand geben Hinweise, wie man mit reagieren-redux Folgendes zu tun:

Komponente A löst eine Aktion, die den Zustand (async)

(Komponente kein Kind von A)

Komponente B aktualisiert muss in der Lage sein, zu erkennen, wenn sich der Status ändert, und eine andere Aktion absetzen.

Mein Problem ist, wenn ich versuche, Aktion 2 in Komponente B zu versenden, der Zustand ist immer noch im Ausgangszustand und es wird nicht aktualisiert.

Ich habe auch versucht Aktion Dispatching 2 in componentWillUpdate jedoch, dass schafft eine Endlosschleife, weil die zweite Aktion aktualisiert auch den Zustand (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); 

Answer 1

Ohne an Ihrem Redux Code zu suchen, würde ich Ihre Komponente B leer Daten im Konstruktor sagen wird immer, weil es etwa zur gleichen Zeit eine Komponente A, und an diesem Punkt der Asynchron-Anfrage initiiert von Komponente A instanziiert ist Konstruktor ist noch in Bearbeitung.

Ihr Redux sollte eine Aktion auslösen, die die empfangenen Daten enthält, wenn die Async-Anforderung abgeschlossen ist. Ihr Reducer versetzt diese Daten dann in den Zustand, der wiederum die Requisiten Ihrer verbundenen Komponenten verändert und sie zwingt, sie neu zu rendern.

Sie sollten getEventUsers nur dann senden, wenn props.eventState.eventId existiert und geändert wurde.