title: Show Loading Spinner with Axios and React (possible Redux)
body: <p>My objective is show a loading spinner when a http request is called. I want to do this globally, It means, when any component call some api, is automatic to show teh spinner, preferably, with no aditional code to control the spinner.</p>
  
  <p>I'm using react and axios. I know about the axios' interceptors.</p>
  
  <p>My actual strucuture:</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;Component App&gt;
      &lt;Component A /&gt;
      &lt;Component B /&gt;
      &lt;Loading Component&gt;
  &lt;/Component App&gt;
  </code></pre>
  
  <p>I don't know is It possible in react, but I Tried to make a general class to implement a base informations about the service, for example, baseUrl and the http interceptor. So, when a need to call a API service, I create a specialized class using the general class and concentred all api methods from that concept there, and, then, use the base class to call the axios method get,post,etc. So, the interceptor appears and show the spinner before the request and hide after the request.</p>
  
  <p>The idea is a component call the specialized class to call a API and show the spinner until the request is running.</p>
  
  <p>I think to use redux to make the state be global, but I don't know if It possible to implement in a class (API Class Base and Specialized API Class)</p>
  
  <p>My questions:
  - Is It possible use this architeture?
  - If yes, how to implement and use redux with this?
  - IIs that right to use class or is better use a component to implement a base service class and the specialized class?</p>
  
  <p>App component:</p>
  
  <pre class="lang-php prettyprint-override"><code>class App extends Component {
  
    constructor(props) {
        super(props);
  
        this.state = {
            rows: []
        };
    }
  
    componentDidMount() {
  var service = new specializedService();
  
       var response = 
  
   specializedService.someAPIMethod(1).then((res) =&gt; {
             this.setState({
                 rows: res.data
             });
       });
  }
  
  render() {
  return (
          &lt;div className="App"&gt;
                  &lt;Component A rows={this.state.rows} /&gt;
                  &lt;Component B rows={this.state.rows}/&gt;
                  &lt;Loading /&gt;
          &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>specializedService:</p>
  
  <pre><code>import serviceBase from "./serviceBase";
  
  class specializedService {
  
      someAPIMethod(id) {
          return serviceBase.get('someMethod/' + id);
      };
  
  }
  </code></pre>
  
  <p>serviceBase:</p>
  
  <pre><code>import axios from "axios";
  
  const serviceBase = () =&gt; {
  
      const api = axios.create({
          baseURL: 'https://xxxxx.xxxxx.com/xxxxxx/'
      });
  
      api.interceptors.request.use(async (config) =&gt; {
          try{
              // In this moment, show the spinner
              // showLoading();
          }
          catch(e)
          {
              alert('Error request' + e);
          }
  
          return config;
      });
  
      api.interceptors.response.use(async (config) =&gt; {
          try {
              // In this moment, hide the spinner
              // hideLoading();
          }
          catch(e)
          {
              alert('Error response' + e);   
          }
  
          return config;
      });
  
      return api;
  };
  
  export default serviceBase;
  </code></pre>
  
  <hr>
  
  <p>I made a simple sample to illustrate the situation, but I don't connect the redux
  <a href="https://repl.it/@DiegoFerreira1/LoadingSpinnerApp" rel="nofollow noreferrer">https://repl.it/@DiegoFerreira1/LoadingSpinnerApp</a></p>