Wie Redux in einfachen Worten funktioniert
Das Übergeben von Daten zwischen React-Komponenten fühlt sich oft wie das Spiel „Stille Post“ an. Man reicht Daten von einem Elternteil an ein Kind und von dort an ein Enkelkind weiter. Das wird schnell unübersichtlich, wenn die App wächst.
Redux löst dieses Problem. Es schafft eine „Single Source of Truth“. Anstatt verstreuter Daten befindet sich alles in einem zentralen Tresor.
Stell dir ein Café vor, um Redux besser zu verstehen.
Der Store (Der Tresor) Dies ist das Kassenbuch des Cafés. Es erfasst die Anzahl der Bohnen, die Bestellungen und die Mitarbeiterlisten.
Die Action (Die Bestellung)
Ein Kunde schnappt sich nicht einfach einen Latte vom Tresen. Er gibt eine Bestellung auf. Eine Action ist ein einfaches Objekt, das beschreibt, was passiert ist.
Beispiel: { type: 'ADD_TODO', text: 'Buy Milk' }
Der Reducer (Der Barista) Der Barista ist die einzige Person, die das Kassenbuch aktualisiert. Er nimmt den aktuellen Zustand und die neue Bestellung entgegen und erstellt dann eine neue Version des Kassenbuchs.
Der Dispatch (Der Kassierer) Der Kassierer nimmt deine Bestellung entgegen und gibt sie an den Barista weiter. Dispatch ist die Funktion, die deine Action an den Store sendet.
Warum sollte man Redux verwenden?
Wenn deine App wächst und Funktionen wie Benutzerprofile oder Warenkörbe hinzufügt, macht ein zentraler Store das Debugging einfach. Du kannst dir den Verlauf deiner Actions ansehen, um zu sehen, wann und warum sich Daten geändert haben. Es fungiert wie ein Flugschreiber für deine Website.
Zusammenfassung:
• Action: Eine Notiz, die eine Änderung beschreibt. • Reducer: Die Logik, die die Änderung ausführt. • Dispatch: Der Auslöser, der die Action an die Logik sendet.
Quelle: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp