Wie Immutable.JS Funktionen/Accessoren innerhalb React Komponenten zu vermeiden

Question

Ich bin eine Anwendung mit React für UI, Redux, um den Status und Immutable.js zu mutieren, um den Zustand zu ändern, jedoch möchte ich wie wissen um die Verwendung von Immutable.JS-Zugriffsmethoden in meinen React-Komponenten zu vermeiden, wie get() oder getIn().

Ich glaube, dass die Verwendung dieser Immutable.JS Accessoren meine React-Komponenten infizieren wird. Wie vermeide ich das?

Answer 1

Die Methode, Immutable.JS-Zugriffsmethoden zu vermeiden und die Punktnotation zu verwenden, verwendet die Datensatzstruktur von Immutable.JS.

Zuerst müssen wir eine Vorlage erstellen:

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, 
     })) 
    } 

Um es in der presentional zugreifen, brauchen wir nur die Stütze zu setzen, die wir wollen, Informationen erhalten, wie :

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

Answer 2

Ich glaube nicht, dass Sie hier eine Option haben, wenn Sie sie unveränderlich halten wollen. Sie könnten es konvertieren toJS, aber dann würden Sie die Vorteile der Objektidentitätsvergleich für das erneute Rendern von reinen Komponenten verlieren. Ihre beste Wette ist wahrscheinlich, Ihre Nase zu halten und so zu tun, als wäre es im Grunde eine JavaScript Map.

Abgesehen davon, wenn Sie nicht mit Immutable.js verbunden sind, könnten Sie in Betracht ziehen, etwas wie seamless immutable zu verwenden, das sich mehr wie native JavaScript-Arrays und -Objekte verhält. Oder Sie könnten altmodisch und nur Object.freeze() Dinge selbst gehen.