Как сделать глобальную переменную в REACT?

Question

[Иван Павленко]

Казалось бы простой вопрос, но, мне не везет с нормальным примером. В гуглах все заходят из далека и к моменту когда доходит до дела, судя по всему, забывают про что писали, либо кусок кода настолько велик, что осознать его уже нет ни каких сил =)
Итого, в REACT надо как то организовать глобальную переменную для передачи адреса RestAPI сервера компонентам приложения. Адрес не сложный, "localhost".
И затем, в внутри компоненты хотелось бы использовать эту переменную как то так:

xhr.open("GET", global.restApiHost + `/api/v1.0/items/${first}/${this.state.itemPerPage}`, true)

Answer 1

[Александр]

С помощью Webpack:

plugins:[
        new webpack.DefinePlugin({
            GLOBAL_VARIABLE: JSON.stringify('value') 
        }),
]

После сборки модулей она видна во всем приложении

Comments

[Александр]

Я юзаю это. Если даже это не пойдет, вам в любом случае смотреть в сторону бандлеров в этом вопросе, ибо определение системных путей, смена их в девелопменте и продакшене - это их работа как раз.

Answer 2

[davidnum95]

В CRA есть переменные окружения: тык

Answer 3

[Алексей Николаев]

// globals/index.js
const restApiHost = 1231313;
export { restApiHost };

// component.js
import { restApiHost } from './globals';
console.log(restApiHost);

Так?

Comments

[Иван Павленко]

Каждый раз делать импорт не особо радует, но пока ваш вариант на первом мест.

[Алексей Николаев]

Иван Павленко, как бы в этом и суть билдера - нет ничего "глобального". Но если нужно глобально, вы можете в main.js сделать

// main.js
import { variable } from './globals';

window.variable = variable;

и далее использовать переменную глобально. Но знайте, что это вредный совет

[grinat]

Иван Павленко, но зато потом когда окажется что апи много и их надо переключать легко сделаешь:
const restApiHost = (function(){
if hui {
return pizda
}
return dzigurda
}())

Вебпак девайн же тупо заменить все ___host___ на строку и хрен переключшь потом.

[grinat]

Алексей Николаев, например на апи внутри докер контейнера, вне докер контейнера. Интерфейсы jopa и vazelin появятся перед внезапным показом проекта заказчику.

[Иван Павленко]

grinat, интерфейсы jopa и vazelin уже и так появились =)
Вебпак плагины вызвали отдельные боли, так как не ясно где их прописывать.
Ну а импорт константы и горячая замена как предложили вы тоже имеет свои недостатки, так как собранный проект превращает
js код и структуру файлов в кашу, и подобные фокус теряет свою актуальность.

[grinat]

Иван Павленко, не теряют они акутальности, элементарно, у заказчика не работает какая-то херь или наебнулась интеграция на одном из серверов, но нужно срочно показать новую фичу, которая работает на деве. То можно будет сделать например:
const restApiHost = (function(){
if localStorage.getItem('api') {
return localStorage.getItem('api')
}
return dzigurda
}())
И его попросить вбить в адресную строку: javascript:localStorage.setItem('api', 'sfsfsdf') и переключить на дев сервер где можно будет спокойно разобраться в проблеме. Если делать через dev.config, через define или через axios.defaults.baseURL = 'https://api.example.com' то такой вариант не проканает.

Answer 4

[Антон Спирин]

Хорошим вариантом будет передавать переменные зависимые от окружения в webpack.DefinePlugin:

new webpack.DefinePlugin({
  '__HOST__': JSON.stringify('https://example.com')
});

В коде:

xhr.open("GET", __HOST__ + `/api/v1.0/items/${first}/${this.state.itemPerPage}`, true);

Comments

[Алексей Николаев]

А что вы скажете насчет использования import config.js (как делаю я)? Это заодно позволяет мне делать сборки для различных окружений (config.dev.js и т.п.). А если нужного конфига нет, сборка просто не осуществится.

[Антон Спирин]

Алексей Николаев, да по-разному можно делать. В вашем случае это удобно если используется в одном месте:

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
});

иначе придется везде писать импорты.

С definePlugin, точно так же, можно делать сборки для разных окружений.

В текущем проекте над которым работаю, вообще, так переменные окружения определяются:

var commonExternals = [{
  'Config': "var " + JSON.stringify({
    APP_GOOGLE: 'xxx',
    APP_APPLE: 'xxx',
    URL: "xxx",
    DOMAIN: "xxx",
    DOMAINS: {
      developers: "xxx",
      base: "xxx"
    }
  })
}];

module.exports = commonExternals;

И в конфиге:

module.exports = {
  //...
externals: [].concat(commonExtarnals)
};

[Иван Павленко]

Звучит красиво, а как прикрутить?
Желательно без eject.
Проект создан через npx create-react-app my-app, и сейчас перелапачивать сборку нет не сил не желания.

[Антон Спирин]

Иван Павленко, adding-custom-environment-variables

Answer 5

[Антон Швец]

так же как и в любом скрипте
window.global = {
restApiHost
};