Ich habe die Definitionen der beiden wie folgt durchgesehen:
Reine Funktionen sind solche, die nicht versuchen, ihre Eingaben zu ändern, und immer dasselbe Ergebnis für dieselben Eingaben zurückgeben.
Beispiel
function sum(a, b) {
return a + b;
}
Und die unreine Funktion ändert ihre eigene Eingabe.
Beispiel
function withdraw(account, amount) {
account.total -= amount;
}
Definitionen und Code-Schnipsel aus den offiziellen Dokumenten von ReactJ .
Kann mir jetzt jemand sagen, wie ich in React / Redux einige Fehler machen kann , um unreine Funktionen zu verwenden, bei denen reine Funktionen erforderlich sind?
javascript
reactjs
redux
MuhammadUmarFarooq
quelle
quelle
window.getElementById
etc, also kann das Ausführen derselben Funktion mit denselben Parametern je nach Nebenwirkungen zu unterschiedlichen Ergebnissen führen. Hier würde Redux scheitern.Antworten:
Reagieren und
Redux
beide benötigen reine Funktionen gepaart mit Unveränderlichkeit, um vorhersehbar zu laufen.Wenn Sie diese beiden Dinge nicht befolgen, weist Ihre App Fehler auf. Die häufigste ist, dass
React/Redux
Änderungen nicht nachverfolgt und beistate/prop
Änderungen nicht erneut gerendert werden können .Betrachten Sie in Bezug auf React das folgende Beispiel:
Der Status wird von dem Statusobjekt gehalten, das nur eine Eigenschaft hinzugefügt hat. Diese App rendert die App-Eigenschaft. Es sollte nicht immer den Status rendern, wenn etwas passiert, sondern prüfen, ob eine Änderung im Statusobjekt aufgetreten ist.
So haben wir eine Effektfunktion, mit
pure function
der wir unseren Zustand beeinflussen. Sie sehen, dass es einen neuen Status zurückgibt, wenn der Status geändert werden soll, und denselben Status zurückgibt, wenn keine Änderung erforderlich ist.Wir haben auch eine
shouldUpdate
Funktion, die mit dem Operator === prüft, ob der alte und der neue Zustand gleich sind.Um Fehler in Bezug auf React zu machen, können Sie tatsächlich Folgendes tun:
Sie können auch Fehler machen, indem Sie den Status direkt festlegen und die
effects
Funktion nicht verwenden .Dies sollte nicht durchgeführt werden und es sollte nur eine
effects
Funktion zum Aktualisieren des Status verwendet werden.In Bezug auf React nennen wir
effects
assetState
.Für Redux:
combineReducers
Dienstprogramm von Redux sucht nach Referenzänderungen.connect
Methode von React-Redux generiert Komponenten, die Referenzänderungen sowohl für den Stammstatus als auch für die Rückgabewerte vonmapState
Funktionen überprüfen, um festzustellen , ob die umschlossene Komponente tatsächlich neu gerendert werden muss.pure functions
keine Nebenwirkungen aufweist, damit Sie korrekt zwischen verschiedenen Zuständen wechseln können.Sie können die oben genannten drei leicht verletzen, indem Sie unreine Funktionen als Reduzierstücke verwenden.
Folgendes wird direkt aus Redux-Dokumenten entnommen:
Es wird als Reduzierer bezeichnet, da dies die Art von Funktion ist, an die Sie übergeben würden
Array.prototype.reduce(reducer, ?initialValue)
.Es ist sehr wichtig, dass der Reduzierer rein bleibt. Dinge, die Sie niemals in einem Reduzierer tun sollten:
Bei gleichen Argumenten sollte der nächste Status berechnet und zurückgegeben werden. Keine Überraschungen. Keine Nebenwirkungen. Keine API-Aufrufe. Keine Mutationen. Nur eine Berechnung.
quelle
Einfach gesagt, der Staat kann nicht mutiert werden. Bei jeder Änderung sollte eine neue Instanz des Status zurückgegeben werden
Dieser Code ist nicht korrekt:
Wenn dieser Code unten als reine Funktion geschrieben wird, wird eine neue Instanz des Arrays zurückgegeben, die das eigentliche Array selbst nicht ändert. Aus diesem Grund sollten Sie eine Bibliothek wie immer verwenden , um mit Unveränderlichkeit umzugehen
quelle
Sie könnten reine Funktionen unrein machen, indem Sie API-Aufrufe hinzufügen oder Codes schreiben, die zu Nebenwirkungen führen.
Reine Funktionen sollten immer auf den Punkt gebracht und selbsterklärend sein und nicht erfordern, dass Sie 3 oder 4 andere Funktionen referenzieren, um zu verstehen, was los ist.
Im Falle von React / Redux
Dies sollte nicht getan werden . Alles, was eine Verbindungsfunktion oder Reduzierungsfunktion benötigt, muss durch Argument geliefert oder in ihre Funktion geschrieben werden. Es sollte niemals von außen kommen.
quelle