Я новичок в React / Redux. Любая помощь будет отличной. У меня есть компонент, который выполняет вызов API для ComponentDidMount, чтобы получить данные, а затем обновить мой магазин Redux. Этот компонент также использует connect для получения состояния Redux и передачи его в качестве подпорки в тупой компонент.

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);

Поскольку componentDidMount срабатывает после рендеринга компонента, он будет рендериться, запускать API, а затем повторно выполнять рендеринг, потому что API изменил состояние избыточности. Это делает так, чтобы компонент рендерился дважды. Первый раз без каких-либо данных, а затем второй с хорошими данными из API.

Есть ли способ лучше?

Поскольку мой дочерний компонент выполняет рендеринг различных вещей на основе реквизита, он кратко показывает что-то другое в первый раз, когда он рендерится. Затем, когда API обновляет хранилище и компоненты рендеринга, он снова показывает что-то другое. Это мерцание двух разных состояний.

Есть ли способ заставить его рендериться только один раз с правильными данными API?