Antworten:
Redux Autor hier!
Ich möchte sagen, dass Sie damit die folgenden Kompromisse eingehen werden:
Sie müssen lernen, Mutationen zu vermeiden. Flux ist nicht begeistert von der Mutation von Daten, aber Redux mag keine Mutationen und viele Pakete, die zu Redux komplementär sind, gehen davon aus, dass Sie den Status niemals mutieren. Sie können dies mit Nur- Entwickler- Paketen wie redux-immutable-state-invariant erzwingen , Immutable.js verwenden oder sich und Ihrem Team vertrauen, um nicht mutativen Code zu schreiben, aber Sie müssen sich dessen bewusst sein, und das muss auch so sein Seien Sie eine bewusste Entscheidung, die von Ihrem Team akzeptiert wird.
Sie müssen Ihre Pakete sorgfältig auswählen. Während Flux explizit nicht versucht, Probleme in der Nähe wie Rückgängig / Wiederherstellen , Persistenz oder Formulare zu lösen , verfügt Redux über Erweiterungspunkte wie Middleware und Store Enhancer und hat ein junges, aber reichhaltiges Ökosystem hervorgebracht . Dies bedeutet, dass die meisten Pakete neue Ideen sind und noch nicht die kritische Masse der Nutzung erhalten haben. Sie könnten sich auf etwas verlassen, das einige Monate später eindeutig eine schlechte Idee sein wird, aber es ist noch schwer zu sagen.
Sie werden noch keine schöne Flow-Integration haben. Mit Flux können Sie derzeit sehr beeindruckende statische Typprüfungen durchführen, die Redux noch nicht unterstützt . Wir werden dort ankommen, aber es wird einige Zeit dauern.
Ich denke, die erste ist die größte Hürde für Anfänger, die zweite kann ein Problem für überbegeisterte Early Adopters sein, und die dritte ist mein persönlicher Ärger mit Haustieren. Abgesehen davon glaube ich nicht, dass die Verwendung von Redux bestimmte Nachteile mit sich bringt, die Flux vermeidet, und einige Leute sagen, dass es im Vergleich zu Flux sogar einige Nachteile hat.
Siehe auch meine Antwort zu den Vorteilen der Verwendung von Redux .
shallowEqualPrüfung festgestellt, ob sich der Zustand geändert hat. Es kann jedoch durch deepEqual oder JSON.stringify ersetzt und verglichen werden. Letztendlich ist es etwas weniger Leistung - aber es sind reine Berechnungen ohne DOM - so schnell genug. Und auf jeden Fall ist das Rendern selbst dasselbe
Sowohl Redux als auch Flux erfordern eine beträchtliche Menge an Boilerplate-Code, um viele gängige Muster abzudecken, insbesondere solche, die das asynchrone Abrufen von Daten beinhalten. Die Redux-Dokumentation enthält bereits eine Handvoll Beispiele für die Reduzierung von Boilerplates: http://redux.js.org/docs/recipes/ReducingBoilerplate.html . Sie könnten alles, was Sie brauchen, aus einer Flux-Bibliothek wie Alt oder Fluxxor beziehen, aber Redux bevorzugt die Freiheit gegenüber Funktionen. Dies könnte für einige Entwickler ein Nachteil sein, da Redux bestimmte Annahmen über Ihren Status trifft, die versehentlich ignoriert werden könnten.
Die einzige Möglichkeit, Ihre Frage wirklich zu beantworten, besteht darin, Redux zu testen, wenn Sie können, möglicherweise in einem persönlichen Projekt. Redux entstand aufgrund des Bedarfs an besserer Entwicklererfahrung und ist auf funktionale Programmierung ausgerichtet. Wenn Sie mit Funktionskonzepten wie Reduzierern und Funktionszusammensetzung nicht vertraut sind, werden Sie möglicherweise verlangsamt, jedoch nur geringfügig. Der Vorteil bei der Berücksichtigung dieser Ideen im Datenfluss liegt in einfacheren Tests und Vorhersagbarkeit.
Haftungsausschluss: Ich bin von Flummox (einer beliebten Flux-Implementierung) zu Redux migriert, und die Vorteile überwiegen bei weitem alle Nachteile. Ich bevorzuge viel weniger Magie in meinem Code. Weniger Magie kostet etwas mehr Kesselplatte, aber es ist ein sehr geringer Preis.
Redux ist keine reine Flux-Implementierung, sondern definitiv von Flux inspiriert. Der größte Unterschied besteht darin, dass ein einzelner Speicher verwendet wird, der ein Statusobjekt umschließt, das den gesamten Status für Ihre Anwendung enthält. Anstatt Speicher wie in Flux zu erstellen, schreiben Sie Reduzierungsfunktionen, die einen einzelnen Objektstatus ändern. Dieses Objekt repräsentiert den gesamten Status in Ihrer App. In Redux erhalten Sie die aktuelle Aktion und den aktuellen Status und geben einen neuen Status zurück. Das bedeutet, dass die Aktionen sequentiell sind und der Zustand unveränderlich ist. Das bringt mich zu dem offensichtlichsten Nachteil in Redux (meiner Meinung nach).
Dafür gibt es nur wenige Gründe:
1. Kohärenz - Der Status des Geschäfts wird immer von einem Reduzierer geändert, sodass leicht nachverfolgt werden kann, wer was ändert.
2. Leistung - Da Redux unveränderlich ist, muss es nur prüfen, ob der vorherige Status! == der aktuelle Status ist, und wenn ja, um zu rendern. Es ist nicht erforderlich, den Status jedes Mal für ein bestimmtes Rendering zu wiederholen.
3. Debugging - neue großartige Konzepte wie Time Travel Debugging und Hot Reloading .
UPDATE: Wenn das nicht überzeugend genug war, schauen Sie sich Lee Byrons exzellenten Vortrag über unveränderliche Benutzeroberflächen an .
Redux erfordert eine Entwicklerdisziplin durch die Codebasis / Bibliotheken, um diese Idee aufrechtzuerhalten. Sie müssen sicherstellen, dass Sie Bibliotheken auswählen und Code auf nicht veränderbare Weise schreiben.
Wenn Sie mehr über die unterschiedliche Implementierung von Flux-Konzepten erfahren möchten (und was für Ihre Anforderungen am besten geeignet ist), lesen Sie diesen nützlichen Vergleich.
Nachdem ich das gesagt habe, muss ich zugeben, dass in Redux die zukünftige Entwicklung von JS stattfinden wird (was das Schreiben dieser Zeilen betrifft).
Einer der größten Vorteile bei der Verwendung von Redux gegenüber den anderen Flux-Alternativen ist die Fähigkeit, Ihr Denken auf einen funktionaleren Ansatz auszurichten. Wenn Sie erst einmal verstanden haben, wie die Drähte miteinander verbunden sind, erkennen Sie die atemberaubende Eleganz und Einfachheit des Designs und können niemals mehr zurückkehren.
Ich bevorzuge die Verwendung von Redux, da es einen Speicher verwendet, der die Statusverwaltung im Vergleich zu Flux und auch Redux DevTools erheblich vereinfacht sehr hilfreiche Tools, mit denen Sie einiger nützlicher Daten sehen können, was Sie mit Ihrem Status tun, und die wirklich mit den React-Entwicklungstools übereinstimmen.
Außerdem hat Redux mehr Flexibilität bei der Verwendung mit anderen gängigen Frameworks wie Angular . Wie auch immer, mal sehen, wie sich Redux als Framework vorstellt.
Redux hat drei Prinzipien, die Redux sehr gut einführen können und die auch den Hauptunterschied zwischen Redux und Flux ausmachen.
Eine einzige Quelle der Wahrheit
Der Status Ihrer gesamten Anwendung wird in einem Objektbaum in einem einzelnen Speicher gespeichert.
Dies macht es einfach, universelle Apps zu erstellen, da der Status von Ihrem Server ohne zusätzlichen Codierungsaufwand serialisiert und in den Client hydratisiert werden kann. Ein einzelner Statusbaum erleichtert auch das Debuggen oder Überprüfen einer Anwendung. Außerdem können Sie den Entwicklungsstatus Ihrer App für einen schnelleren Entwicklungszyklus beibehalten. Einige Funktionen, die traditionell schwierig zu implementieren waren - beispielsweise Rückgängig / Wiederherstellen -, können plötzlich trivial zu implementieren sein, wenn Ihr gesamter Status in einem einzigen Baum gespeichert ist.
console.log(store.getState())
/* Prints
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
*/Der Status ist schreibgeschützt
Die einzige Möglichkeit, den Status zu ändern, besteht darin, eine Aktion auszugeben, ein Objekt, das beschreibt, was passiert ist.
Dies stellt sicher, dass weder die Ansichten noch die Netzwerkrückrufe jemals direkt in den Status schreiben. Stattdessen drücken sie die Absicht aus, den Staat zu transformieren. Da alle Änderungen zentralisiert sind und nacheinander in einer strengen Reihenfolge erfolgen, gibt es keine subtilen Rennbedingungen, auf die Sie achten müssen. Da Aktionen nur einfache Objekte sind, können sie zu Debug- oder Testzwecken protokolliert, serialisiert, gespeichert und später wiedergegeben werden.
store.dispatch({
type: 'COMPLETE_TODO',
index: 1
})
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
})Änderungen werden mit reinen Funktionen vorgenommen
Um festzulegen, wie der Statusbaum durch Aktionen transformiert wird, schreiben Sie reine Reduzierungen.
Reduzierer sind nur reine Funktionen, die den vorherigen Status und eine Aktion übernehmen und den nächsten Status zurückgeben. Denken Sie daran, neue Statusobjekte zurückzugeben, anstatt den vorherigen Status zu ändern. Sie können mit einem einzelnen Reduzierer beginnen und ihn beim Wachstum Ihrer App in kleinere Reduzierungen aufteilen, die bestimmte Teile des Statusbaums verwalten. Da Reduzierungen nur Funktionen sind, können Sie die Reihenfolge steuern, in der sie aufgerufen werden, zusätzliche Daten übergeben oder sogar wiederverwendbare Reduzierungen für allgemeine Aufgaben wie die Paginierung erstellen.
function visibilityFilter(state = 'SHOW_ALL', action) {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
completed: false
}
]
case 'COMPLETE_TODO':
return state.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: true
})
}
return todo
})
default:
return state
}
}
import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)Weitere Informationen finden Sie hier
Soweit ich weiß, ist Redux vom Fluss inspiriert. Flux ist eine Architektur wie MVC (Model View Controller). Facebook führt den Fluss aufgrund von Skalierbarkeitsproblemen bei der Verwendung von MVC ein. Flux ist also keine Implementierung, sondern nur ein Konzept. Eigentlich ist Redux die Implementierung von Flux.