Ich bin ein Neuling bei React / Redux. Jede Hilfe wäre toll. Ich habe eine Komponente, die ComponentDidMount über eine API aufruft, um Daten abzurufen und dann meinen Redux-Speicher zu aktualisieren. Diese Komponente verwendet ebenfalls connect, um den Redux-Status abzurufen und ihn als Requisite an eine dumme Komponente weiterzugeben.

componentDidMount() {
  this.props.dispatch(fetchSite()) //this triggers the api call and updates the redux store.
}

return ( 
  <div>
    <Child
        myprop={this.props.name}
    />
  </div>

export default connect((state) => ({name: state.name}))(Container);

Da componentDidMount nach dem Rendern der Komponente ausgelöst wird, wird die API gerendert, ausgeführt und dann erneut gerendert, da die API den Redux-Status geändert hat. Dadurch wird die Komponente zweimal gerendert. Das erste Mal ohne Daten und das zweite Mal mit guten Daten von der API.

Gibt es einen besseren Weg?

Da meine Child-Komponente verschiedene Dinge basierend auf den Requisiten rendert, die übergeben wurden, zeigt sie beim ersten Rendern kurz etwas anderes. Wenn dann die API den Speicher aktualisiert und die Komponenten neu gerendert werden, wird wieder etwas anderes angezeigt. Es ist ein Flackern von zwei verschiedenen Zuständen.

Gibt es eine Möglichkeit, es mit den richtigen API-Daten nur einmal zu rendern?