2017-12-27 323 views
1

我們有一個使用React + Redux + ImmutableJS的項目。我們的一位工程師最近增加了一個輔助方法來支持它傳遞時,一個組件作爲道具解構的ImmutableJS地圖:React Component Props的解構ImmutableJS映射

export function toObjectShallow(mapping: Map) { 
    const result = {}; 
    mapping.map((value, key) => { 
     result[key] = value; 
    }); 
    return result; 
} 

因此,我們仍然可以做以下和避免重複調用是詳細到Map.get

<XyzComponent {...toObjectShallow(this.props.xyz)}/> 

是的,這實質上是使原始對象的兩個淺拷貝(我們的方法+解構)。這應該是最低的費用。我想知道,因爲我沒有在React/Redux/Immutable社區的其他地方看到這樣的推薦,還有什麼我錯過了會使這種不理想的嗎?

傳遞的屬性仍然是原始的,不可改變的道具。它只是包含的對象被突變,這並不重要,因爲它不會傳遞給組件。那麼,是什麼給了?這似乎是這樣一個簡單的解決方案,同時避免toJS()。爲什麼不在任何地方提及?

+0

對我有很大爭議的問題,以及你可以在這裏查看的一些原因:https://esdiscuss.org/topic/extensible-destructuring-proposal 從我的角度來看,沒有理由這樣做,因爲你可以通過映射到更智能的組件,並且仍然可以獲得不可改變的優勢,但使用您的方法,您仍然會改變容器。所以你可以更新或重新構建你的REDX端來獲得一個乾淨的狀態,而不需要傳播Immutable。 –

回答

0

我認爲我正在尋找的「正確」答案是繼續使用Immutable JS的toObject(),它將Immutable Map對象淺轉換爲常規對象,從而允許我們繼續使用語法糖,同時保持屬性不可變而不必使用我們自己的淺拷貝。

2

我遵循redux文檔中的建議,對所有連接的組件使用HOC,以允許我與redux之外的純JavaScript對象進行交互。所以,我選擇和減速器仍然使用ImmutableJS對象,但其餘代碼使用普通的JavaScript對象:

https://redux.js.org/docs/recipes/UsingImmutableJS.html#use-a-higher-order-component-to-convert-your-smart-components-immutablejs-props-to-your-dumb-components-javascript-props

編輯 - 不知道這是你在上面提toJS,我曾以爲你的意思ImmutableJS .toJS。

就偏好而言,使用HOC只需要每個組件執行一次,而不是每次在方法中使用組件。

+0

其實@詹姆斯問爲什麼這個解構不可變是不是一個普遍的範例,但道具傳播不Immutable是。 –

+0

是不是你只在連接組件上做過一次的區別,而是你將道具傳遞給連接組件的每一個組件? – brub

+0

不,我認爲你只做一次過渡到非固定的道具,每隔一次你通過道具你會通過一個Imm.js對象。例如,用戶容器列表將獲得具有userid:info的地圖,然後UserCard將獲得用戶道具等的地圖,直到最後的化身將獲得非不可變的Map.get('avatar_url'),例如 –