使用带有 ajax 调用的 react-redux 调用 API - 如何存储 API URL

Question

这是使用react-redux时的设计问题。所以 React 应用程序的数据来自服务。我不想对服务 URL 进行硬编码，因为不同的环境（本地、暂存和生产环境）具有不同的 URL。我现在正在做的是将 URL 保存在 redux store 中。但感觉不对，因为 store 应该记录应用程序状态，而 URL 不是状态的一部分。有没有 "redux" 方法来处理这个问题？

Answer 1

实际上，redux 现在不关心应该使用哪个 API 地址，除非你必须即时切换它们。

因此，在我看来，最简单的方法是构建不同的构建选项（例如，通过 webpack 全局变量），这将使用选定的 API 前缀编译您的代码。

你是对的，如果某些东西不应该在应用程序商店中 – 不要将它存储在那里。通过您的构建工具、预编译或运行时的一些检测来变通——但通常，您的 redux 代码不应该有任何副作用，只有应用程序状态和响应事件。

Answer 2

我使用 npm dotenv 包解决了它。它从 .env 文件设置环境变量。一旦它在 webpack 中完成，我只需要将变量传递给 React.createElement。

一旦 React 有了变量，在存储中我使用 thunkMiddleWare.withExtraArgument 来传入 url 或任何其他设置变量（例如 pusher 实例）。然后可以通过像

这样的 redux-action 来访问它们

return((dispatch, getState, extra) => {
  extra.api...;
  extra.pusher.push...;
}

使用带有 ajax 调用的 react-redux 调用 API - 如何存储 API URL

Using react-redux with ajax call to API - How to store the API URL

api

ajax

reactjs

redux