как передать данные ajax до компонентов в реакции

Question

Я изучаю реакцию и имею приложение, которое использовалось для работы со статическими данными, хранящимися в объекте javascript. Теперь я загружаю эти данные через ajax, используя axios.

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

Как каждый компонент может получить доступ к данным родительского приложения, не передавая его в качестве опоры для каждого компонента?

Вот мой код

class App extends Component { 

    constructor(props) { 
    super(props); 
    this.state = {appData: {}}; 
    } 

    componentDidMount() { 
    axios.get('/data/appData.json') 
    .then((result)=> { 
     const thisData = result.data; 
     this.setState({ 
     appData: result.data 
     }); 
    }) 
    } 

    componentWillUnmount() { 
    this.serverRequest.abort(); 
    } 

    render() { 

    const theData = this.state.appData; 
    if (Object.keys(theData).length > 0 && theData.constructor === Object){ //if the object is not empty 
     return (
     <div className="App"> 
      <AppHeader appData={theData} /> 
      <AppMenu appData={theData} /> 
      <MainCarousel appData={theData} /> 
      <HomeDetails appData={theData} /> 
      <Model3D appData={theData} /> 
      <AppMaps appData={theData} /> 
      <AppContact appData={theData} /> 
     </div> 
    ); 
    } else { 
     return (
     <div className="App"></div> 
    ) 
    } 

    } 
} 

И компонент, который будет использовать данные, выглядит следующим образом:

function AppHeader(props) { 
    return (
    <div className="App-header"> 
     <h2 className="App-title">{props.appData.copy.title}</h2> 
     <h4 className="App-subtitle">{props.appData.copy.subtitle}</h4> 
    </div> 
); 
} 

для функции или

class MainCarousel extends Component { 
    mixins: [Carousel.ControllerMixin]; 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    const carouselItems = this.props.appData.carouselItems.map((carouselItem) => 
     <AppCarouselItem key={carouselItem.name.toLowerCase()} name={carouselItem.name} image={carouselItem.image} /> 
    ); 
    return (
     <div className="App-carousel"> 
     <Carousel autoplay={true} wrapAround={true}> 
      {carouselItems} 
     </Carousel> 
     </div> 
    ); 
    } 
} 

для класса.

Answer 1

Для ваших целей то, что вы делаете, вполне приемлемо, единственное, что я бы изменил, - это разделить состояние на объект для каждого компонента. Это предотвратит обновление каждого компонента при каждом обновлении одного из них.

Где вещи становятся беспорядочными, когда ваши дочерние компоненты обновляют состояние родителя. Здесь вам пригодится библиотека, например, Flux или Redux.

Если вы просто создаете простое приложение со статическими данными, отправляйте состояние на свой компонент в качестве реквизита.