Zwei grundlegende Ideen in Redux
Bevor wir mit dem Erlernen der Redux-Bibliothek beginnen, machen wir uns mit zwei ihrer grundlegenden Ideen vertraut. Die erste Idee, die die Zustandsverwaltung betrifft, werden wir anhand eines einfachen Zählers mit State in React betrachten:
function Counter() {
// State
const [count, setCount] = useState(0)
// Action:
function clickHandler() {
setCount(count + 1)
}
// View:
return (
<div>
<span>{count}</span>
<button onClick={clickHandler}>+</button>
</div>
)
}
In diesem Code sehen wir den State
für die Variable count - das ist
die Quelle der Wahrheit für den Zähler. Dann sehen wir
eine Aktion (action) - ein Ereignis,
das beim Klick des Benutzers ein
State-Update auslöst. Und schließlich
die Darstellung (view),
mit der wir die
Benutzeroberfläche anzeigen.
So ist das Schema ziemlich einfach:
Die Schaltfläche wird gedrückt - der State count (State)
wird durch den Druck (Action) geändert, folglich
ändert sich die Darstellung (View) - in unserem Fall
die Zahl auf dem Bildschirm.
Allerdings wird alles komplizierter, wenn wir viele Komponenten haben, die denselben State verwenden müssen. Man könnte natürlich zum Beispiel den State nach oben heben zu übergeordneten Komponenten, aber diese Lösung kann das Problem nicht immer beseitigen. Redux bietet uns in diesem Fall an, einen einzigen Ort in der Anwendung zu schaffen, der den globalen State enthalten soll und bestimmte Verhaltensmuster bei der Aktualisierung dieses Zustands. Genau das ist die erste grundlegende Idee (!).
Die zweite Idee betrifft die Immutabilität, also die Unveränderlichkeit von Daten. Sie erinnern sich sicherlich aus JavaScript, dass Arrays und Objekte veränderbar sind. Die direkte Veränderung von Daten in Redux, wie auch in anderen Frameworks, gilt als schlechter Stil und kann zu unvorhersehbaren Konsequenzen führen. Daher müssen in Redux unsere ursprünglichen Objekte und Arrays immutabel bleiben, und wir dürfen nur ihre Kopien verändern.
Erzählen Sie, worin die erste grundlegende Idee von Redux besteht.
Erzählen Sie, worin die zweite grundlegende Idee von Redux besteht.