ReactJS 我在哪里存储 API URI？答案

【问题标题】：ReactJS where do I store the API URI?ReactJS 我在哪里存储 API URI？
【发布时间】：2018-09-25 19:23:21
【问题描述】：

我应该将 API URI 集中存储在 ReactJS 应用程序的什么位置？ URI 仅在环境之间更改，并且应该易于配置（即通过环境变量）。

我已经研究了this 包和新的 Context API，但我不确定这是实现这一目标的最佳方式。我还研究了dotenv，但我不喜欢我必须在每个想要访问 API 的组件中使用process.env.REACT_APP_SERVICE_URI。通常的做法是什么？

我没有使用 Redux。

【问题讨论】：

无需将 API URI 存储在 redux 存储中，如果我理解您不需要将 URI 传递给所有组件的问题。实际上，当您使用 redux 时，您需要从“操作”中发送请求。
我写了我不使用 Redux 并且我不打算使用它。
您可以使用配置来存储 baseURL 以便动态更改它，然后您可以使用一个通用函数，该函数将使用 fetch 可以在您想要调用 api 时调用。
你是怎么解决的？ :)
@mklimek 现在我只是从需要访问 API 的每个容器中的环境变量中读取。不过，这种情况不会持续太久。我将不得不考虑一些新的东西。

标签： reactjs

【解决方案1】：

我认为您不需要外部依赖项来执行此操作。

我通常创建一个名为api-client.js 的简单模块，它负责调用外部API 和定义端点。

在你的情况下，你可能有：

import axios from 'axios' // some http client lib

const endpoint = process.env.REACT_APP_SERVICE_URI? process.env.REACT_APP_SERVICE_URI : 'https://foo.api.net/'

export default {
  getAllProducts () {
      return axios.get(endpoint + 'products').then(response => {
        log.debug(`api client fetched ${response.data.length} items`)
        return response.data
      }).catch(err => {
        log.error(err.message)
        throw err
      })
    } 
  },
  getProductById (id) {
    ...
  },
}

你只读过一次process.env.REACT_APP_SERVICE_URI。

我喜欢把这个模块放在api 目录中（以及任何其他与 API 相关的东西）。

【讨论】：

好方法。我最初打算采用这样的“服务”方法，但我了解您try to keep the functionality with the components in React。 dotenv 依赖项已经包含在 create-react-app 中（我忘了补充说我正在使用它）。也许我将来会改用基于服务的方法。
保持简单，直到你真的需要更多东西。