React - Mobx - Fetch - DRY最佳实践

Question

我正试图清理一些代码以消除冗余，并有一些关于最佳实践的问题。

为了简单起见，假设我有3个mobx商店。PeopleStore, PlacesStore和 AuthStore.

所有这些商店都是通过使用 fetch.

该 AuthStore 提供了登录功能，并且有一个属性。@observable apiToken

在其他商店里有重复的逻辑，设置api url，token等等... ...

我试着创建了以下文件。

// ./api.js

const url = 'https://example.com'
const options = {
   headers: {
      Authorization: ??? (how do I access AuthStore.apiToken)
   }
}

export const api = (endpoint) => {
  fetch(url + endpoint, options)
}

然后在... PeopleStore

import api from './api'

class PeopleStore {
   getPeople() {
     api('/people');
   }
}

(这只是一个概念的例子，而不是实际的代码)

我的疑问是。

• 这是个好办法还是有更好的办法？

• 我如何访问 apiToken 里面 api.js?

• 我的假设是正确的吗？api 只是一个函数而不是一个反应组件？

  • 如果是这样，我还能不能 inject 的 AuthStore 进入 api()? (我相信我遇到了这个问题)

• 我的另一个想法是把所有的商店都包在一个叫 "M "的地方。HOC 提供了这个功能，但同样（我假设），商店不是实际的react组件，这是否会导致任何问题？

Answer 1

另一种方法是在您的应用程序的顶层全局设置您的授权头。 这将需要您安装 轴心 诸如此类

例如，在你的根目录index.js中。

• 获取你的api密钥，通过 process.env.apiToken 或你是怎么得到它
• 设置头。

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

你也可以设置基本的URL来帮助你设置路径。

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

这样一来，你就不需要担心标记的问题了，它就会被处理掉。