Einführung in Redux

View more Tutorials:

1- Was ist Redux?

2013 sagte  Facebook , dass  AngularJS vom  Google langsam und schwer ist. So stellt sie dieses Jahr der Entwickler-Gesellschaft  ReactJS . Aber  ReactJS ist nur eine Bibliothek um  Component zu erstellen und diese  Component auf die Interface zu rendern.  ReactJS hat keine Fähigkeit zum Management des Status der Applikation. Bald danach stellte  Facebook eine Bibliothek Javascript mit dem Name vom  Flux für die Hilfe des Applikation-Status vor. Und es ist eine Bibliothek, die zur Unterstützung von  React geboren wird.
In dieser Zeit studierte  Dan Abramov  Flux vom  Facebook und die Sprache  ELM. Er ist durch die Architektur vom  ELM beeinflusst, und fand die Komplextiät vom  Flux.  Am Mai 2015 kündigte  Dan Abramov eine Bibliothek mit dem Name vom  Redux an, die auf die Architektur vom  ELM basiert und die Komplexität vom  Flux beseitigt.

ELM

ELM ist eine Funktion Entwicklung Sprache (Functional Programming Language), die aus  Haskell ziemlich viel beeinflusst wird, und in  JavaScript direkt kompiliert. Außer der Gleichheit von  Haskell ist die Highlight vom  ELM seine Architektur ( ELM Architecture). Diese Architektur hilft bei der leichteren Entwicklung der Web-applikation auf die  FPL-Stil Sprachen ( Functional Programming Language
Nach dem Geburt macht   Redux einen großen Ruf und sofort gewinnen die Aufmerksamkeit von der Gesellschaft  React und eben  Facebook ladt Dan Abramov zum Arbeiten ein. Jetzt existieren  Redux und  Flux parallel aber  Redux ist mehr beliebt und weltweit benutzt.

Flux vs Redux:

Für den Endbenutzer (enduser) sorgt sie bei dem Interaktivieren auf die Interface der Applikation nur für das Ergebnis der Aktion. Aber in der Praxis passieren viele Prozessen. OK, jetzt werden wird die Architektur vom  Flux und  Redux analysieren um diese Prozesse besser zu verstehen.

2- Die Architektur vom Flux

Die Architektur vom  Flux wurde zum ersten Mal im Jahr vom 2014 in der Konferenz Facebook F8 durch  Bill Fisher und  Jing Chen vorgestellt. Diese Idee re-definiert das Modell  MVVM ( Model View - View Model), die mit dem Begriff  "unidirektional Datenfließen " ( unidirectional data flow) vorher weltweit benutzt wurde.
Die Aktionen und die Events im  Flux werden einen  "geschlossenen Kreis" mit der folgenden Form durchgehen:
  • USER INTERFACE — action —> DISPATCHER — action —> STORES — notify changes —> USER INTERFACE
Unter ist das die Illustration der generalen Architektur vom  FLUX:
Wenn der Benutzer eine Aktion auf die Interface (z.B den Maus klicken) tut. Ein Objekt  Action wird erstellt. Das ist ein übliches Objekt, die die Informationen speichert wie : das Aktionstyp, wo die Aktion passiert, wann die Aktion passiert und ihre Koordinate (dem Maus Event entsprechen), welche   state geändert wird,..
// Action object example:
{
  type: 'ADD_TODO',
  payload: {
    title: 'Do something.',
    priority: 'HIGH',
    completed: false
  }
}
Die Teilen in der Archiektur vom  FLUX:
VIEW: eine hierarchische Komposition vom   React Component.
ACTION: ist ein reines Objekt , das zur Speicherung der betreffenden Information von Events des Benutzer erstellt wird (auf die Interface klicken,..). Es enthaltet die Informationen wie das Aktionstil, die Zeit des Auftreten, der Ort des Auftreten, die Koordinate und das Hauptzweck für die Änderung eines  state ,.
DISPATCHER: Die einzige Punkt in der Applikation zur Erhaltung der Objekte  Action für die Behandlung
STORE: Store hört die  Action zu, die Daten und den Status von der Applikation managen. Die Store basieren auf die Objekte  action um die entsprechenden  USER INTERFACE zu rückmelden.

3- Die Architektur vom Redux

Redux lernt die Architektur vom  Flux aber es beseitigt die unnotwendigen Komplexität.
  • Redux hat kein Begriff DISPATCHER.
  • Redux hat nur eine einzige STORE anstelle von vieler STORE we Flux.
  • Die Objekte Action werden durch STORE bekommen und direkt behandelt.
Unter ist das die Illustration der Architektur vom  REDUX:
Die Teilen in der Architektur vom  REDUX:

VIEW PROVIDER: vertritt ein  View Framework um mit  STORE zu registrieren. Davon kann  View Framework  React oder  Angular,...
ACTION: ist ein reines Objekt, das zur betreffenden Information von Events des Benutzer erstellt wird (den Maus auf die Interface klicken,..). Sie enthaltet die Information wie :das Aktionstyp, die Zeit des Auftreten, der Ort des Auftreten, die Koordinate und das Hauptzweck zur Änderung eines  state ,.
STORE: Managet den Status der Applikation und hat die Funktion  dispatch(action).
MIDDLEWARE: (Die mittlere Software) bietet eine Maßnahme zur Interaktion mit den Objekte  Action, die zur  STORE geschickt werden bevor sie zu  REDUCER direkt gesendet werden. Beim  Middleware können Sie die Aufgaben wie das Tagebuch schreiben, die Fehler anmelden, die asynchronen Aufforderungen (asynchronous Request) erstellen, oder die neue Aktionen versenden (dispatch)...
REDUCER: ist eine reine Funktion um einen neuen Status aus den originellen Status zurückzugeben. Achtung: REDUCUER ändert den Status der Applikation nicht stattdessen wird er eine Kopie des originellen Status erstellen und ändert sie um einen neuen Status zu schaffen.

View more Tutorials: