Add redux

pull/3/head
Jonas Franz 3 years ago
parent 26fe7b756d
commit 935f4f97c4
  1. 9
      bibliography.bib
  2. BIN
      chapters/basics/reduxflow.jpg
  3. 23
      chapters/basics/state-management.tex

@ -171,4 +171,13 @@ isbn="978-981-15-1465-4"
urldate = {2022-01-30},
}
@Book{redux,
author = {Garreau, Marc and Faurot, Will},
title = {Redux in action},
publisher = {Manning Publications Co},
year = {2018},
address = {Shelter Island, NY},
isbn = {9781617294976}
}
@Comment{jabref-meta: databaseType:bibtex;}

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

@ -191,7 +191,30 @@ Bei \texttt{flutter\_riverpod} werden die bereits eingeführten Widget-Typen \te
\subsection{Redux}
Redux ist eine Zustandsverwaltungssystem, welches ursprüunglich für React enwickelt worden ist. React ist ein JavaScript-Bibliothek zum Bauen von Benutzeroberflächen. Da React und Flutter ähnliche Techniken wie Widgets oder das State-Prinzip verwenden, lässt sich dieser Ansatz auf Flutter und Dart übertragen.
Redux basiert auf drei grundlegenden Prinzipien:
\blockquote[{\cite[Kap.1.3.2]{redux}}]{Single source of truth [...]
State is read-only [...]
Changes are made with pure functions [...]}
Das Prinzip der \blockquote[{\cite[Kap.1.3.2]{redux}}]{Single source of truth} wird dadurch umgesetzt, dass es für die komplette Anwendung nur einen zusammengefassten Zustand gibt. Es findet hier also keine Aufteilung in diverse Unterzustände beispielsweise für einzelne Seiten statt.
\begin{figure}[h]
\centering
\includegraphics[width=\textwidth]{chapters/basics/reduxflow.jpg}
\caption{Datenfluss in Redux \autocite[Kap.1.3.3]{redux}}
\label{fig:reduxflow}
\end{figure}
Dieser globale Zustand ist, wie im zweiten Prinzip dargestellt wird, unveränderlich. Um den Zustand zu ändern beziehungsweise in diesem Fall zu ersetzen, ist es erforderlich, sogenannte \textit{actions} zu emittieren. \textit{Actions} sind dabei in Flutter einfache Objekte, die auch Parameter in Form von Variablen beinhalten können. Diese \textit{Action} wird dann wie in \autoref{fig:reduxflow} anschaulich zu sehen ist, über einen \textit{Reducer} auf den globalen Zustand (engl. \textit{store}) angewendet.
Damit wird dann auch das dritte Prinzip umgesetzt. Ein \textit{Reducer} stellt nämlich eine einfache Funktion dar, welche als Parameter den aktuellen Zustand und die \textit{Action} erhält und als Rückgabewert einen neuen Zustand angibt, welcher den globalen Zustand ersetzt.
Für Dart wurde dies mit der \texttt{redux} Bibliothek umgesetzt. Ähnlich wie bei Riverpod wird hier noch eine zusätzliche Bibliothek benötigt, die Redux für das Flutter-Widget-System anwendbar macht. Dafür wird \texttt{flutter\_redux} verwendet. Diese adaptiert das Prinzip der Provider-Bibliothek für Redux-Stores. So wird der Store mittels eines Provider-Widget über die Widget-Tree für nachgelagerte Widgets zur Verfügung gestellt. Auf den Store zugegriffen wird über Selektoren, welche den benötigten Teil des globalen Zustands eingrenzen und per Callback-Funktion zurückgeben. Somit wird über diese Selektoren auch die Verändunger der Widgets ausgelöst, wenn sich der entsprechende Teil des globalen Zustands ändert.
\subsection{GetIt}

Loading…
Cancel
Save