Как создать глобально доступную переменную в React JS

Question

В моем реагирующем приложении JS я делаю много вызовов API,

Вместо того, чтобы указывать: const BASE_URL = 'https://apiurlgoeshere.com/'

на каждой странице, я бы предпочел иметь BASE_URLдоступны во всем приложении, поэтому я могу просто сделать BASE_URL + API_CALL, например

Answer 1

Если webpack используется для пакета кода, можно использовать DefinePlugin .

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

Для gulp сборки можно использовать gulp-replace .

.pipe(replace('BASE_URL', 'https://apiurlgoeshere.com/'))

Answer 2

Если это просто добавление BASE_URL, то этого можно добиться, объявив его внутри файла constants.js и экспортировав его оттуда.Но тогда это заставляет нас делать BASE_URL + "something" каждый раз, когда мы делаем сетевой запрос, который тоже не идеален.Также могут быть некоторые сценарии, в которых необходимо предоставить доступ к другой конфигурации, например, общий заголовок, который необходимо добавить ко всем запросам.

Для решения этой проблемы большинство библиотек запросов имеют встроенные решения.Если мы выберем axios в качестве наиболее популярного, мы можем создать экземпляр , например:

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
export default instance;

и импортировать его везде, куда собирается axiosиспользовать как:

import axios from "./axios-instance";

при условии, что axios-instance.js - это файл, в котором создается экземпляр.Теперь вы можете пропустить добавление BASE_URL к каждому запросу, как это уже предусмотрено в экземпляре.