React - Mobx - Fetch - DRY 最佳實踐

Question

我正在嘗試清理一些代碼以消除冗余並對最佳實踐有一些疑問。

為了簡單起見，假設我有 3 個 mobx 商店PeopleStore 、 PlacesStore和AuthStore 。

所有這些商店都使用fetch連接到第 3 方 api。

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');
   }
}

（這只是概念的一個例子，而不是實際的代碼）

我的問題是：

• 這是一個好方法還是有更好的方法來 go 關於這個？

• 如何訪問apiToken中的api.js ？

• 我是否正確假設api只是 function 而不是反應組件？

  • 如果是這樣，我仍然可以將AuthStore inject api()嗎？ （我相信我遇到了這個問題）

• 我的另一個想法是將所有商店包裝在提供此功能的HOC中，但同樣（我假設）商店不是實際的反應組件，這會導致任何問題嗎？

Answer 1

另一種方法是在應用程序的頂層全局設置您的授權 header 。 這將需要您安裝axios或類似的東西

例如，在您的根 index.js 中：

• 獲取您的 api 密鑰，通過process.env.apiToken或者您正在獲取它
• 設置 header：

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

您還可以設置基本 URL 以幫助路徑：

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

這樣您就不必擔心令牌，它只會被照顧。