基於React/Redux構建基於React和依賴注入的成熟應用程序體系結構

Question

我是React的新手，試圖通過它來構建一個良好的應用程序體系結構。 我也用打字稿與所有的特點：接口，異步的await，仿製等，所以，我很疑惑實施某種模式：

1）依賴注入，可重用的組件實例

的我無法通過的第一件事是DI。假設我們有一個組件類UserProfile，它需要一些依賴項，如UserProvider。如果組件實例（注入Deps）可以重用，那將是完美的，但恐怕只有我的夢想，而不是反應的人。 :) 所以，我應該這樣，把這個組件：

<UserProfile id={123} />

好吧，什麼是這裏注入依賴的正確方法？作爲一個像這樣的屬性<UserProfile id={123} dependency={userProvider: userProviderInstance} />？ 難道你不認爲將組件輸入數據，選項/參數和依賴關係放在一起很奇怪嗎？如果我能夠清楚地分開它們並對組件類進行通用限制，我會很高興。最佳做法是什麼？

無法重用組件實例的另一方面是，我們必須在所有組件結構中攜帶一些不必要的對象，以便將它們注入深處的底部。沒有人告訴你什麼組件確實使用它們。並試圖想象在大型項目中添加對低級組件的依賴關係。我不能。

2）使用承諾

讓我們考慮是應該呈現一個櫃檯一個簡單的組件：<Counter value={123} />。 現在，值從一些API調用的方法getCounter(id: number): Promise<number>;了，所以明顯的方式把所有在一起，看起來是這樣的：

<Counter value={await provider.getCounter(id)} /> 

但I'T不可能的，我知道。通常的做法告訴我們通過setState方法並在收到值後重新渲染組件。

現在設想父組件非常複雜並且有許多不同的提供者。所以，父組件可能沒有明確的狀態類型。這也可能是有條件的，你知道...

你可以建議我實現異步獲取計數器組件，但我會拒絕的一個簡單的理由：該組件不知道任何關於該值的起源。在其他情況下，該值直接作爲數字傳遞。那麼，您是否有更好的想法，在使用承諾時如何保持代碼清潔和簡單？

請讓我知道，如果你遇到一些好文章或有你自己的經驗解決這些問題。 PS：感謝您的關注！ :)

Answer 1

本主題是偏見的對象 - 所以下面我會給出不假裝是絕對真理的話題我非常個人想法。

1. DI。

這實際上並不是那麼普遍的反應模式，因爲它是在角度。但是同時具有組件中的上下文和屬性，可以使您像純DI一樣對歸檔進行相同級別的分離。檢查context - 它將幫助您擺脫在整個組件樹中傳遞相同的道具。關於這個話題的文章已經不少（one，two） - 請檢查一下。你也可能有興趣閱讀這個thread）。

承諾

我真的沒有看到任何問題就在這裏。 React有一個簡單的概念 - 基本上你有狀態並且基於這個狀態你的應用可以呈現自己。而rendering不是異步操作 - 狀態的preparation/update可以很容易地異步完成，並在結果assigned到狀態的相應部分 - 必要的子組件將自動更新。如果你的組件不知道如何獲得價值 - 它不應該試圖做到這一點 - 價值應該作爲道具傳遞下去。