React Fetch On Event - лучшие практики

Question

Наша команда является новичком в React, и мы изучаем лучшие практики, как мы go.

Одной из самых больших проблем для команд сейчас является то, как мы обрабатываем наши вызовы API и работаем с состоянием. Мы следуем советам Reacts -> «Lift Up State». Все это работает, но это приводит к тому, что наши компоненты более высокого уровня становятся большими и часто обрабатывают вызовы API, которые, как я думаю, не должны быть связаны с этим.

Приведенный ниже пример очень упрощен. В действительности каждый из этих операторов извлечения должен будет устанавливать состояние нескольких различных вещей, таких как loadingForA, statusForA, dataForA .... Это быстро приводит к очень большому состоянию и большому количеству передачи реквизитов

Есть ли какие-либо шаблоны проектирования, которые можно использовать здесь? Я посмотрел в «Render Props», но это, кажется, трудно использовать для событий API запускает

Пример:

class SelectorA extends Component {
   render(){
      return(
         <Dropdown
            onChange = {this.props.handleChange}
         >{this.props.data}</Dropdown>
         <p>{this.props.date}</p>
      )
   }


}


class App extends Component {
   constructor(props) {
        super(props);
        this.state = {
            date: '',
            dataA: {},
            dataB: {},
            dataC: {}
        };
    }
   handleChangeA() {
      fetch(someURL)
      .then(
         this.setState({dataA: fetchResult});
      )
    }

   handleChangeB() {
      fetch(someURL + this.state.dataA)
      .then(
         this.setState({dataB: fetchResult});
      )
   }

   handleChangeC() {
      fetch(someURL + this.state.dataC)
      .then(
         this.setState({dataC: fetchResult});
      )
   }

   render(){
      return(
         <SelectorA
             handleChange = {this.handleChangeA}

             date = {this.date}
             data = {this.dataA}
         />
         <SelectorB
             handleChange = {this.handleChangeB}

             date = {this.date}
             data = {this.dataB}
         />
         <SelectorC
             handleChange = {this.handleChangeC}

             date = {this.date}
             dataC = {this.dataC}
         />
      );
   }

}