Hoe een configuratiebestand op te slaan en te lezen met React

Ik ben nieuw op react.js Ik heb een component geïmplementeerd waarin ik de gegevens van de server ophaal en gebruik zoals,

CallEnterprise:function(TenantId){
    fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) 
    {
        EnterprisePerspectiveActions.getEnterprise(enterprises);
    }).catch(function()
    {
        alert("There was some issue in API Call please contact Admin");
        //ComponentAppDispatcher.handleViewAction({
        //    actionType: MetaItemConstants.RECEIVE_ERROR,
        //    error: 'There was a problem getting the enterprises'
        //});
    });
},

Ik wil de URL in het configuratiebestand opslaan, dus als ik dit op de testserver of op de productie implementeer, moet ik gewoon de url in het configuratiebestand wijzigen, niet in het js-bestand, maar ik weet niet hoe ik het configuratiebestand moet gebruiken om te reageren. js

Kan iemand mij helpen hoe ik dit kan bereiken?

Antwoord 1, autoriteit 100%

Met webpack kunt u env-specifieke configuratie in het veld externalsin webpack.config.js

plaatsen

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

Als je de configuraties in een apart JSON-bestand wilt opslaan, is dat ook mogelijk, je kunt dat bestand nodig hebben en toewijzen aan Config:

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

Vervolgens kunt u in uw modules de configuratie gebruiken:

var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')

Voor Reageren:

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

Ik weet niet zeker of het jouw gebruiksscenario dekt, maar het werkt redelijk goed voor ons.

Antwoord 2, autoriteit 62%

Als je Create React App hebt gebruikt, kun je een omgevingsvariabele instellen met een .env-bestand. De documentatie is hier:

https://facebook.github.io/ create-react-app/docs/adding-custom-environment-variables

Doe zoiets als dit in het .env-bestand in de hoofdmap van het project.

REACT_APP_NOT_SECRET_CODE=abcdef

Houd er rekening mee dat de variabelenaam moet beginnen met REACT_APP_

Je hebt er toegang toe vanaf je component met

process.env.REACT_APP_NOT_SECRET_CODE

Antwoord 3

U kunt het dotenv-pakket gebruiken, ongeacht de configuratie die u gebruikt. Hiermee kunt u een .env maken in de hoofdmap van uw project en uw sleutels zo specificeren

REACT_APP_SERVER_PORT=8000

In het invoerbestand van uw toepassingen roept u gewoon dotenv(); voordat u de sleutels gebruikt, zoals zo

process.env.REACT_APP_SERVER_PORT