如何避免React組件中的Immutable.JS函數/訪問器

Question

我正在編寫一個使用React for UI的應用程序，Redux來管理狀態和Immutable.js來改變狀態，但是，我想知道以避免在我的React組件中使用Immutable.JS訪問器，如get（）或getIn（）。

我相信使用Immutable.JS訪問器會感染我的React組件。如何避免這種情況？

Answer 1

避免Immutable.JS訪問器並使用點符號的方法是使用Immutable.JS中的Record結構。

首先我們必須創建一個模板：

const MyTemplate = Record({ 
    id: 0, 
    name: '' 
}) 

...

case ContentFilterTypes.ADD_ITEM: 
    return { 
     listObjects : state.listObjects.push(new MyTemplate({ 
      id: action.item.id, 
      name: action.item.description, 
     })) 
    } 

要訪問它在presentional，我們只需要設置我們想要獲取信息的道具，像：

<ContentFilterAvatar id={value.id} name={value.name} /> 

Answer 2

如果你想保持它不可變，我認爲你不會在這裏有很多選擇。您可以將其轉換爲toJS，但是您將失去重新呈現純組件的對象標識比較的好處。你最好的選擇是保持你的鼻子，並假裝它基本上是一個JavaScript Map。

除此之外，如果你沒有附加到Immutable.js，你可能會考慮使用像seamless immutable這樣的行爲更像本地JavaScript數組和對象。或者你可以去老式的，只是你自己的東西Object.freeze()。