使用react-redux和ajax调用API - 如何存储API URL

Question

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

Answer 1

实际上，除非你必须动态切换，否则现在不应该关注它应该使用哪个API地址。

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

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

Answer 2

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

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

这样的redux-action访问它们

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