2016-11-17 72 views
0

我推薦的一種模式是使用選擇器來儘可能隱藏商店的形狀。這樣,如果您需要更新商店的形狀,您應該只能更新選擇器,而不能更新應用程序的其他部分。React Redux - 存儲對象的方法

然而,同樣的問題出現在州內使用模型。

作爲衆多例子之一,我們假設我在Redux中構建了一個文件系統。我有一個可以是目錄或文件的文件列表。

我的商店可能有一個fileList屬性,它包含一個文件ID數組以及一個files對象,該對象將fileId映射到文件對象。

比方說,我有一個文件列表,我想根據文件或目錄是否有不同的Item組件(即DirectoryItemFileItem)。實現這一

一種方式是做這樣的事情:

{ 
    files.map(file => { 
    file.type = 'directory' ? 
     <DirectoryItem key={file.id} ...file /> : 
     <FileItem key={file.id} ...file /> 
)} 
} 

(或者我可以創造一個更高階FileListItem成分,例如,做了檢查,並使得無論是DirectoryItemFileItem

但是這可能並不理想,因爲現在我的組件需要知道文件對象的結構。我可能想要添加不同類型的對象(即快捷方式文件或共享文件),並可能決定不再想要表示我的數據。因此,我需要去更新我所有的組件等。

例如,如果我在Backbone中這樣做,我可能會選擇在我的模型上定義一個isDirectory()函數,但是這樣做不會這似乎是Redux做事的方式。

我能想到的一個可能的解決方案是創建一個FileUtils輔助類,它導出isDirectory方法並將文件對象作爲參數。

另一種選擇將創建一個isDirectory選擇這需要一個文件編號爲道具,做這樣的事情:

(files, props) => state.files[props.fileId].type == 'directory'

如果我要創建選擇,我想我需要創建一個高階組件從中調用選擇器。

想知道在Redux中推薦哪種方法嗎?我錯過了另一種可以幫助解決這個問題的方法嗎?

回答

2

做事情的功能方式只是規定將對象的方法撕掉並將其稱爲函數。

推薦的方式是調用它,而不是有一個this,只需傳遞一個常規參數。這不是要求。您只能使用callapply。這在js中可能看起來很奇怪,但運營商可能很快就會改變。

現在,你可以給這個函數任何你喜歡的東西來幫助它獲得它的數據。

在您的例子

(files, props) => state.files[props.fileId].type == 'directory' 

你傳遞狀態(有命名錯誤)和道具,然後利用這些信息拿出一個答案。但是你可以選擇傳遞一個目錄入口對象。不需要從狀態中獲取它。

請注意,這使得它非常接近一種方法。

isDirectory = entry => entry.type === 'dir'; 

現在,因爲它沒有獲得狀態,所以沒有從狀態中選擇任何東西,因此也不是選擇器。

但是,它在本質上功能很多。真的沒有必要或不需要使生活變得更加複雜。添加一個更高階的組件或者試圖將我們的問題變成一種更加Redux-y的處事方式是無用的複雜事情。

選擇器被推薦用於選擇狀態,因此狀態的使用不受狀態的影響。這是一個抽象層,將您的減速器與您的mapStateToProps分開。

選擇器現在被認爲是Redux Way的一部分,但事實並非如此。所以,根據你的判斷,被告知爲什麼是這樣做的,你可以選擇不使用它

而且,根據您的判斷,您可以選擇用您自己的版本替換當前趨勢。強烈建議這樣做,當然在考慮替代方案之後。

通常最好的解決方案就是你自己想出的解決方案。作爲您的問題領域的最瞭解者,您是唯一有資格制定出匹配的解決方案的人員。如果有更好的東西出現,那些已經發展出了我們所有人都能夠從中獲得靈感並從中獲得靈感的人的想法的人可能會從他們的觀點出發。

沒有(也可能不應該是)神聖的範例。一切都有資格重新考慮。奧卡姆的剃刀指出最簡單的答案很可能是正確的答案。

而且Redux非常關注簡單性。所以要做的事Redux Way主要是做直接的方式。