2015-11-18 47 views
24

將反應與redux一起使用時,是否可以將本地狀態存儲在state對象中?通過行爲將所有內容存儲在狀態樹中很快變得單調乏味。感覺有些狀態僅適用於應用程序的展現/展示,而不是邏輯。通過演示我的意思是動畫/閃爍,面板的擴展/縮小狀態,表格中的排序標準等等。處理反應和還原中的本地狀態

回答

13

這很難回答,因爲不同的人會將組件的不同部分歸類爲「狀態」。

由於Redux與應用程序狀態有關,作爲經驗法則,任何您期望應用程序級別「撤消/重做」按鈕生效的內容都應該作爲Redux操作發生。 Redux有一個撤銷存儲插件的事實可能只是因爲應用程序狀態的範圍。

當然,一些動畫不可撤銷,因爲這些動畫應該真的與應用程序狀態中的變化相關聯,而不是自己改變。儘管如此,其餘的例子聽起來很像應用程序狀態。如果我排序了一個表格,然後按下撤消,我絕對期望排序被撤消。

+2

我喜歡將應用程序狀態用於您希望能夠撤消的事情的建議。 – aviemet

+0

什麼時候我想要做類似改變類名時滑動元素做一些動畫?這個東西應該還在redux行動中嗎? –

5

正如Tyrsius已經提到的 - 對此有不同的看法。

對於我們 - 作爲一個經驗法則 - 我們確保跟蹤應用程序狀態的所有內容,我們希望能夠看到我們是否能夠遠程連接到某些用戶當前會話。

如果我們不在意是否鼠標懸停在某個元素上,我們可能只會使用組件狀態(如果我們需要狀態的話)。

儘管我們在腳本中只有一些這樣的情況,但我們想知道用戶在大多數情況下看到的更容易調試的情況。

您提到了面板的展開/摺疊狀態 - 我們有時會爲我們創建處理這種展開/摺疊邏輯的組件,所以我們不必爲我們創建的每個面板都編寫這樣的縮減器。

我們可以利用這些組件是這樣的:

<Panel id="somePanelId">some content</Panel> 

面板組件將確保應用程序狀態中跟蹤板激活狀態。這樣,保持代碼簡單並且不會讓它爆炸是非常容易的。

+1

這個看起來好像是一個例子。我不確定你的意思是讓組件跟蹤應用程序狀態中的狀態而不使用reducer – Tyrsius

+1

組件確實有它自己的reducer,並根據你如何與它進行交互來分派動作。 一個切換例如調度一個動作,該動作將id爲「props.id」的toggle的可見性設置爲「props.active」,該屬性爲true或false,並且切換通過mapStateToProps連接到狀態。 給定組件的狀態是通過state.toggles [props.id]提取的。 –

+0

組件減速器如何連接到主存儲減速器? – Tyrsius

7

現在這是回答在redux FAQs

有這個沒有「正確」的答案。有些用戶更喜歡在Redux中保留每一個數據片段,以便始終保持其應用程序的完全可序列化和受控版本。其他人更喜歡在組件的內部狀態內保持非關鍵或UI狀態,例如「當前打開的下拉列表」。

使用本地組件狀態很好。作爲一名開發人員,您的工作是確定組成您的應用程序的狀態以及每個州應該在哪裏生活。找到適合你的平衡點,並與之配合。