Javascript React-Mobx-Fetch-DRY最佳实践

我试图清理一些代码以消除冗余，并对最佳实践提出了一些问题

为了简单起见，假设我有3个mobx商店

PeopleStore

，

PlacesStore

，和

AuthStore

所有这些存储都使用

fetch

连接到第三方api

AuthStore

提供登录功能并具有一个属性：

@observeable-apiToken

其他存储中存在重复逻辑，设置api url、令牌等

我尝试创建以下文件：

/./api.js
常量url=https://example.com'
常量选项={
标题：{
授权：？？？（如何访问AuthStore.apiToken）
}
}
导出常量api=（端点）=>{
获取（url+端点，选项）
}

然后在

PeopleStore

从“/api”导入api
阶级人民商店{
getPeople（）{
空气污染指数（“/人”）；
}
}

（这只是一个概念示例，而不是实际代码）

我的问题是：

• 这是一个好方法还是有更好的方法

• 如何访问

  api.js

  中的

  apiToken

• 我假设

  api

  只是一个函数而不是react组件，对吗
  • 如果是这样，我仍然可以

    将
    AuthStore
    注入
    api（）
    ？（我认为我在这方面遇到了问题）

• 我的另一个想法是将所有存储包装在提供此功能的

  HOC

  中，但是（我假设）存储不是实际的react组件，这会导致任何问题吗

---

另一种方法是在应用程序的顶层全局设置授权标题。这将需要您安装或类似的东西

例如，在root index.js中：

• 通过

  process.env.apiToken

  或以任何方式获取api密钥
• 设置标题：

axios.defaults.headers.common['Authorization']=apiToken

您还可以设置基本URL以帮助设置路径：

axios.defaults.baseURL='1〕https://api.example.com';

这样，您就不必担心代币了，代币将得到妥善保管。
看看这个，它在如何组织mobx商店方面帮了我很大的忙