React＆Redux應用程序設計

Question

我是Redux的新手，編寫了一個擁有全局狀態的前端應用程序，該狀態在啟動時通過Ajax進行檢索，然后在獲取新數據時通過poll / push進行更新。 在導航到每個url時，有一個actor調度到一個動作，然后該動作調用一個reducer，該viewState用此globalState的過濾視圖覆蓋viewState對象的一部分。 例如，導航到URL /items/filter/a會將viewState調整為以下內容：

state {
     viewState: {
          items: [{id: 1, value: 'a'}]
     }
     globalState: {
          items: [{id: 1, value: 'a'}, 
                  {id: 2, value: 'b'}, 
                  {id: 3, value: 'c']}
     }
}

在此步驟之后，然后通過另一個actor調用ReactDOM.render()並使用viewState的更新值重新呈現所有組件（這不是我的代碼，直接來自unicorn入門包）

我想知道a）這是否是構造此類應用程序的明智方法。 b）在應用程序啟動時初始化globalState變量然后偵聽更新的最佳方法是什么（如果具有該ID的對象當前在viewState則可能會更新viewState ）

Answer 1

我沒有使用Redux的經驗，因為我們在項目中使用了普通香草Flux，但是我們有一個類似的方案，我們的解決方案也可能適合您的方案。

通常，我認為這是分割全球狀態的好策略。 也有一些庫可以做到這一點（例如Facebook Relay ），它可以為您提供此功能以及更多現成的功能。

關於初始狀態的呈現，我們所做的就是將所有組件設置為很好地處理空數據集，即，如果它們在初始呈現時未接收到任何數據，則僅呈現空div和加載器。 然后，從服務器檢索到所有數據后（使用Q庫使用BeginRender進行同步），我們將BeginRender操作，該操作將導致所有現在已填充數據的存儲區觸發change事件。 訂閱商店的組件將接收事件，並調用商店方法以檢索數據。 一旦他們接收到新數據，組件狀態就會更新，並且組件會用數據重新渲染。