Où ajouter une configuration personnalisée pour les bibliothèques externes (modules NPM) dans React

Question

Où ajouter une configuration personnalisée pour les bibliothèques externes (modules NPM) en réaction, qui seront utilisés dans l'application entière

Mon énoncé du problème est: I je fais appel à l'API Axios, je ne veux pas inclure en-tête d'authentification dans chaque appel séparément, je pense à y créer une Axios de fichiers et l'importation et faire quelque chose comme ça

customAxios = axios 
customAxios.defaults.headers.common['Authorization'] = store.getState().session.token; 

export customAxios 

maintenant, je vais importer customAxios dans n'importe quel fichier où je dois faire appel api Est-ce la bonne façon? si ce n'est pas comment gérer cette situation

BTW je suis nouveau réagir

Answer 1

Vous pouvez créer une classe d'api dans dont le constructeur, vous pouvez créer une instance de Axios et affecter les informations d'en-tête. Utilisez ensuite l'instance dans tous vos appels.

export default class Api{  
    constructor(auth_token){ 
     this.customAxios= axios.create({ 
      baseURL: 'https://myserverurl.com' 
      });    
      this.customAxios.defaults.headers.common['Authorization'] = auth_token;    
    } 

    getInfo(){ 
     this.customAxios.get('/info') ....// do further processing and return data 
    } 
} 

Et lorsque vous souhaitez appeler l'API, vous pouvez créer une instance et utiliser cette instance pour vos appels.

let apiInstance = new Api(store.getState().session.token); 
apiInstance.getInfo();