Как разбить вызов Axios в REACTJS на несколько файлов?

Question

Мой проект выполняет вызовы Axios в нескольких файлах, и я хочу смодулировать его и передать вызов в качестве поддержки другим файлам, которые в этом нуждаются.

Вот мой componentDidMount () метод, который имеет вызов:

 componentDidMount () {
 document.body.style = 'background: #b8bab2;'
// Retrieve projects data
 axios.get('/env?var=READER_HOSTNAME').then(response => {
  return axios.get(`${response.data.var}/graphql?query=${queries.allProjects()}`)
 }).then(response => {
  this.setState({
    projects: response.data.data.projects,
    visible: response.data.data.projects,
    isLoaded: true
  })
 })
}

Answer 1

Вы можете создать компонент более высокого порядка .

import React, { Component } from 'react'

export default withData = MyComponent => {
  return class MyComponentWithData extends Component {
    state = { projects: null, visible: null, isLoaded: false }

    componentDidMount() {
      // Retrieve projects data
      axios.get('/env?var=READER_HOSTNAME')
        .then(response => {
          return axios.get(`${response.data.var}/graphql?query=${queries.allProjects()}`)
        }).then(response => {
          const { projects } = response.data.data
          this.setState({
            projects,
            visible: projects,
            isLoaded: true
          })
        })
    }

    render() {
      const { projects, visible, isLoaded } = this.state
      if (!isLoaded) {
        return null
      }
      return (
        <MyComponent
          {...this.props}
          projects={projects}
          visible={visible}
          isLoaded={isLoaded}
        />
      )
    }
  }
}

Импорт withData в компонент, с которым вы хотите его использовать, так:

class SomeComponent extends Component {
  // ... component code
}
export default withData(SomeComponent)