javascript - React kullanarak Konfigürasyon dosyasını nasıl saklayıp okuyabilirim

React.js konusunda yeniyim, bir bileşen uyguladım ve bu bileşende verileri sunucudan alıp şöyle kullanıyorum,

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'
        //});
    });
},

Url'yi yapılandırma dosyasında saklamak istiyorum, böylece bunu Test sunucusuna veya Üretim sunucusuna dağıttığımda, sadece js dosyasında değil, yapılandırma dosyasında url'i değiştirmem gerekecek ama react.js'te yapılandırma dosyasını nasıl kullanacağımı bilmiyorum.

Biri bana bunu nasıl başarabileceğimi gösterebilir mi lütfen?

Cevap #1

Webpack ile çevreye özgü yapılandırmayı webpack.config.js içindeki externals alanına koyabilirsiniz

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

Ayarları ayrı bir JSON dosyasında saklamak istiyorsanız, bu da mümkündür, o dosyayı gerektirebilir ve Config'e atayabilirsiniz:

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

Sonra modüllerinizde, yapılandırmayı kullanabilirsiniz:

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

React için:

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

Kendi kullanım durumunuzu kapsayıp kapsamadığından emin değilim ama bizim için oldukça iyi çalışıyor.

Cevap #2

Eğer Create React App kullandıysanız, bir .env dosyası kullanarak bir ortam değişkeni ayarlayabilirsiniz. Belgeler burada:

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

Temelde proje kökündeki .env dosyasında buna benzer bir şey yapın.

REACT_APP_NOT_SECRET_CODE=abcdef

Değişken adının REACT_APP_ ile başlaması gerektiğine dikkat edin

Buna bileşeninizden şunla erişebilirsiniz

process.env.REACT_APP_NOT_SECRET_CODE

İlgili makaleler