Immutable.js ausführlich erklärt

Dieses Mal werde ich Ihnen eine detaillierte Erklärung von Immutable.js geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Immutable.js? Hier sind praktische Fälle.

Anwendung von Immutable.js im React + Router + Redux-Projekt

Erste Einführung von Immutable:

Die Entstehung von Immutable.js entstand aus der Idee der funktionalen Programmierung. Das heißt, alle Daten sollten kopiert und nicht direkt geändert werden. Eine entsprechende Einführung finden Sie auf der offiziellen Website:
https://facebook.github.io/immutable-js/

Wenn Sie also etwas Programmiererfahrung haben, können Sie es verstehen Das Unveränderliche ist eine weitere Bibliothek von Datenstrukturen. Es ist, als würde man von ArrayList zu LinkedList wechseln. Unter Immutable.js wird es von JavaScript-Syntaxs eigenem Array (das ist []) und Objekt ({ }) in Immutable.List und Immutable.Map geändert.

Aber schließlich erben sowohl ArrayList als auch LinkedList von List, und die Schnittstellen sind relativ konsistent, sodass es kein großes Problem darstellt, sie zu ersetzen. Wenn Sie jedoch Immutable verwenden möchten, um JavaScript-nativ zu ersetzen, ist dies kein großes Problem wird etwas komplizierter sein.

var map1 = Immutable.Map({a:1, b:2, c:3});var map2 = map1.set('b', 50);
map1.get('b'); // 2/* ----------------悠长悠长的分割线---------------- */var list1 = Immutable.List.of(1, 2);var list2 = list1.push(3, 4, 5);var list3 = list2.unshift(0);var list4 = list1.concat(list2, list3);

Es ist kompliziert, aber es geht nur darum, mehr Aufmerksamkeit zu schenken.

Dann lasst uns über Redux und Router sprechen

Redux verfügt über eine CombineReducers-Methode, die Reduzierer aufteilen kann. Zum Beispiel:

combineReducers({  user: userReducer,
  dashboard: dashboardReducer,
})

Dann kommt die Frage:
Wenn Sie den Status abrufen, verwenden Sie dann state.get('user') oder state.user?

Verwenden Sie offensichtlich state.user. Weil combineReducers Immutable nicht kennt.
(Sagen Sie mir nicht, ich soll es mischen. Eine einschichtige Struktur kann so sein. Was ist mit mehreren Schichten? Wie wäre es mit der Zusammenarbeit mit mehreren Personen? Wenn Sie sich an einer Stelle täuschen, werden überall Fehler gemeldet)

Wenn Sie also ein React + Router + Redux verwenden möchten Wenn Sie Immutable in Ihrem Projekt verwenden, können Sie es entweder lokal verwenden (wenn es lokal verwendet wird, ist es im Grunde ein großer Albtraum) oder Sie können es verwenden als Komplettset.
Dann schauen Sie hier (dieser Typ hat CombineReducers umgeschrieben):
https://github.com/gajus/redux-immutable

Verwenden Sie ihre CombineReducers, Sie können sicher sein. Verwenden Sie state.get('user ').

Während sie CombineReducers lösten, lösten sie auch das Problem von React-Router-Redux (stellen Sie sich vor, dass der Router ein Routing-Modul unter dem Status ist, aber nicht weiß, wie man Immutable verwendet):

https ://github.com/gajus/redux-immutable#using-with-react-router-redux

Nachdem ich so viel gesagt habe, wie man es benutzt

Zuallererst ist Ihr Projekt reagieren + Standardkonfiguration des Routers + Redux.
Dann müssen Sie Immutable vorstellen.

Dann sollten Sie Folgendes tun:

redux-immutable einführen

Konfigurieren Sie den Verlauf gemäß der README.md von redux-immutable (Strg+C, Strg+V)

Verwenden Sie beim Zusammenführen aller Reduzierer die CombineReducers von redux-immutable

Verwenden Sie Immutable.js's Immutable.List und Immutable.Map für alle Daten, die in den Zustand eintreten und ihn verlassen (das ist das eigentliche Thema)

Gibt es sonst noch etwas, worauf Sie achten sollten?

Probleme mit Komponenten:

Die Idee von Redux besteht darin, Komponenten in Smart und Dumb zu unterteilen. Die Smart-Komponente ist für den Empfang von Daten verantwortlich, und die Dumb-Komponente ist für die Verwendung von Daten verantwortlich und konzentriert sich nur auf Requisiten. Deckt Immutable also „Smart and Dumb“ ab?

Meine persönliche Meinung ist folgende:
Dumme Komponenten müssen grundsätzlich abstrahiert und von mehreren Projekten gemeinsam genutzt werden. Es wäre besser, wenn diese Komponenten Immutable nicht unterstützen würden, da sie sonst an Immutable gebunden wären.

Die Daten in Dumb stammen also nativ aus JavaScript. Bedeutet das nicht, dass wir die Vorteile von Immutable nicht nutzen können?
Die Daten wurden in die Komponente kopiert, es ist also nichts Falsches daran, ein wenig auf Kompatibilität zu verzichten, oder?

Die Schlussfolgerung hinter dieser Idee ist:
Container im Redux-Konzept führt auch eine gegenseitige Konvertierung zwischen unveränderlich und nativ durch, wenn eine Verbindung zwischen Status und Requisiten sowie zwischen Requisiten und Versand hergestellt wird. (Adaptermuster)

Beim Testen:

Sie sollten die aktuellen Daten in console.log speichern. Das Eingeben der Immutable.List sieht sehr ermüdend aus. Es wird empfohlen, console.log (imtb) zu verwenden .toJS())

Aber was ist mit dem Debuggen?

Off-Topic

Es wäre schön, wenn diese Funktionen in JavaScript selbst integriert wären.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man mit js in der Android-Entwicklung interagiert

JS-Modularisierung-RequireJS

Ein Rich-Text-Editor im Graphitdokumentstil, erstellt mit Vue.js 2.0+

Pfad zu node.js Detaillierte Erklärung der Module

Das obige ist der detaillierte Inhalt vonImmutable.js ausführlich erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!