Wann sollte ich einer React-App Redux hinzufügen?

Ich lerne gerade React und versuche herauszufinden, wie ich es mit Redux zum Erstellen einer mobilen App verwenden kann. Ich bin etwas verwirrt darüber, wie die beiden miteinander verwandt / verwendbar sind. Zum Beispiel habe ich dieses Tutorial in React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript abgeschlossen , aber jetzt möchte ich mit dem Hinzufügen einiger Reduzierer / Aktionen zu dieser App und herumspielen Ich bin mir nicht sicher, wo diese mit dem übereinstimmen würden, was ich bereits getan habe.

React ist ein UI-Framework, das sich um die Aktualisierung der UI als Reaktion auf die „Quelle der Wahrheit“ kümmert, die normalerweise als Zustand beschrieben wird, der einer Komponente „gehört“. Thinking in React beschreibt das Konzept des React State Ownership sehr gut, und ich empfehle Ihnen dringend, es durchzugehen.

Dieses Statusbesitzmodell funktioniert gut, wenn der Status hierarchisch ist und mehr oder weniger mit der Komponentenstruktur übereinstimmt. Auf diese Weise wird der Status auf viele Komponenten verteilt, und die App ist leicht zu verstehen.

Manchmal möchten entfernte Teile der App jedoch Zugriff auf denselben Status haben, z. B. wenn Sie abgerufene Daten zwischenspeichern und sie überall gleichzeitig konsistent aktualisieren möchten. Wenn Sie in diesem Fall dem React-Modell folgen, werden am oberen Rand des Komponentenbaums eine Reihe sehr großer Komponenten angezeigt, die eine Vielzahl von Requisiten durch einige Zwischenkomponenten weiterleiten, die sie nicht verwenden Erreichen Sie einige Blattkomponenten, die sich tatsächlich um diese Daten kümmern.

Wenn Sie sich in dieser Situation befinden, können Sie Redux verwenden (müssen es aber nicht), um diese Zustandsverwaltungslogik aus den Komponenten der obersten Ebene in separate Funktionen, sogenannte Reduzierer, zu „extrahieren“ und die Blattkomponenten zu „verbinden“ Kümmere dich direkt um diesen Zustand, anstatt die Requisiten durch die gesamte App zu leiten. Wenn Sie dieses Problem noch nicht haben, benötigen Sie Redux wahrscheinlich nicht.

Beachten Sie schließlich, dass Redux keine endgültige Lösung für dieses Problem ist. Es gibt viele andere Möglichkeiten, Ihren lokalen Status außerhalb der React-Komponenten zu verwalten. Beispielsweise sind einige Leute, die Redux nicht mochten, mit MobX zufrieden . Ich würde Ihnen empfehlen, zuerst ein genaues Verständnis des Reaktionsstatusmodells zu erlangen, dann verschiedene Lösungen unabhängig voneinander zu bewerten und mit ihnen kleine Apps zu erstellen, um ein Gefühl für ihre Stärken und Schwächen zu bekommen.

(Diese Antwort ist von Pete Hunts React-Howto- Leitfaden inspiriert. Ich empfehle Ihnen, sie ebenfalls zu lesen.)

Ich habe festgestellt , dass der ideale Weg Redux zu einer Anwendung / Stack für das Hinzufügen zu warten , bis nach Ihnen / app / Team der Schmerzen fühlen , dass sie löst. Sobald Sie lange Ketten des propsAufbaus und der Weitergabe durch mehrere Komponentenebenen sehen oder komplexe Zustandsmanipulationen / -lesungen orchestrieren, könnte dies ein Zeichen dafür sein, dass Ihre App von der Einführung von Redux et al.

Ich empfehle, eine App zu nehmen, die Sie bereits mit "just React" erstellt haben, und zu sehen, wie Redux in sie passt. Sehen Sie nach, ob Sie es elegant einführen können, indem Sie jeweils einen Status oder eine Reihe von "Aktionen" herausreißen. Refactor darauf zu, ohne an einem Urknall-Rewrite Ihrer App hängen zu bleiben. Wenn Sie immer noch Probleme haben zu erkennen, wo sich ein Mehrwert ergeben könnte, könnte dies ein Zeichen dafür sein, dass Ihre App entweder nicht groß oder komplex genug ist, um etwas wie Redux zusätzlich zu React zu verdienen.

Wenn Sie noch nicht darauf gestoßen sind, hat Dan (oben beantwortet) eine großartige Kurzvideoserie, die auf einer grundlegenderen Ebene durch Redux geht. Ich empfehle dringend, einige Zeit damit zu verbringen, Teile davon aufzunehmen: https://egghead.io/series/getting-started-with-redux

Redux hat auch einige großartige Dokumente. Insbesondere das Erklären vieler "Warum" wie http://redux.js.org/docs/introduction/ThreePrinciples.html

Ich habe dieses Dokument vorbereitet, um Redux zu verstehen. Hoffe das klärt deine Zweifel.

-------------------------- TUTORIAL REDUXEN ----------------------

AKTIONEN - Aktionen sind Nutzdaten mit Informationen, die Daten aus Ihrer Anwendung an das Geschäft senden. Sie sind die einzige Informationsquelle aus dem Geschäft. Sie können sie nur mit store.dispatch () senden.

   Example-
const  ADD_TODO = 'ADD_TODO'

{
   type:ADD_TODO,
   text: 'Build my first redux app'
}

Aktionen sind einfache Javascript-Objekte. Die Aktion muss eine Eigenschaft [Typ] haben, die den Typ der ausgeführten Aktion angibt. Der Typ sollte als Zeichenfolgenkonstante definiert werden.

AKTIONSERSTELLER ----- ---------------- ---- Aktionsersteller sind genau die Funktion, die Aktionen erstellt. Es ist einfach, die Begriffe Aktion und Aktionsersteller zusammenzuführen. Bei der Redux-Aktion gibt der Ersteller eine Aktion zurück.

function addToDo(text) {
   return {
    type: ADD_TODO,
    text    
   }
}

Um den Versand zu initialisieren, übergeben Sie das Ergebnis an die Funktion dispatch ().

1. Versand (addToDo (Text));
2. Versand (completeToDo (Index))

Alternativ können Sie einen gebundenen Aktionsersteller erstellen, der automatisch versendet.

cosnt boundAddTodO = text => dispatch(addToDo(text));

Jetzt können Sie es direkt nennen

boundaddTodO(text);

Auf die Funktion dispatch () kann direkt von store.dispatch () aus zugegriffen werden. Wir greifen jedoch mit einer helper connect () -Methode darauf zu.

Actions.js .....................

Aktionen...........

exports cosnt ADD_TODO = 'ADD_TODO';
exports cosnt TOGGLE_TODO = 'TOGGLE_TODO'

Aktionen Ersteller

Exportfunktion addToDO (Text) {return {Typ: ADD_TODO, Text}}

......................... REDUZIERER ........................ ..........

Reduzierer geben an, wie sich der Anwendungsstatus als Reaktion auf an den Speicher gesendete Aktionen ändert.

Gestaltung der Staatsform

In Redux wird der gesamte Anwendungsstatus in einem einzelnen Objekt gespeichert. Sie müssen einige Daten sowie einen Status speichern.

{sichtbarkeitsfilter: 'SHOW_ALL', todos: [{text: 'Redux in Betracht ziehen', abgeschlossen: true}, {text: 'Den gesamten Status in einem einzigen Baum beibehalten'}]}

Behandeln von Aktionen ---------------- Die Reduzierungen sind die reinen Funktionen, die den vorherigen Status und die vorherige Aktion übernehmen und einen neuen Status zurückgeben.

(previousState, action) => newState

Wir beginnen mit der Angabe des Ausgangszustands. Redux wird unsere Reduzierer zum ersten Mal mit einem undefinierten Status aufrufen. Dies ist unsere Chance, den Status unserer App zurückzugeben.

import  { visiblilityFilters } from './actions';
const initialState = {
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todo: []
}

function todoApp(state, action){
    if(typeof state == 'undefined'){
        return initialState;
    }

    // dont handle other cases as of now.
    return state;
}

Sie können dasselbe mit ES6 tun, um mit dem JS umzugehen

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

................................. GESCHÄFT................ ....................

Der Laden ist ein Objekt, das sie zusammenbringt. Der Laden hat folgende Verantwortung

1. Anwendungsstatus halten
2. Erlaube den Zugriff auf den Status über getState ()
3. Status über Dispatch aktualisieren lassen ()
4. Registrieren Sie Listenereres über Suscriber (Listener)

Hinweis. Verwenden Sie kombinierenReduzierer (), um mehrere Reduzierer zu einem zu kombinieren.

const store = createStore (todoapp); // die todoapp sind die reduzierer

Erstens müssen Sie ReduxIhrer Anwendung nichts hinzufügen , wenn Sie sie nicht benötigen! Einfach, also zwingen Sie sich nicht, es in Ihr Projekt aufzunehmen, wenn Sie es überhaupt nicht brauchen! Das heißt aber nicht, dass Redux nicht gut ist, es ist wirklich hilfreich in großen Anwendungen, also lesen Sie weiter ...

Redux ist eine Statusverwaltung für Ihre React-Anwendung. Denken Sie an Reduxein lokales Geschäft, das Ihren Status verfolgt, während Sie unterwegs sind. Sie können auf den Status auf jeder gewünschten Seite und Route zugreifen. Vergleichen Sie dies auch mit Flux. Sie haben nur ein Geschäft eine Quelle der Wahrheit ...

Schauen Sie sich dieses Bild an, um auf einen Blick zu verstehen, was Redux zuerst tut:

Auch so stellt sich Redux vor:

Redux ist ein vorhersehbarer Statuscontainer für JavaScript-Apps.

Es hilft Ihnen beim Schreiben von Anwendungen, die sich konsistent verhalten, in verschiedenen Umgebungen (Client, Server und native) ausgeführt werden und einfach zu testen sind. Darüber hinaus bietet es eine großartige Entwicklererfahrung, z. B. die Bearbeitung von Live-Code in Kombination mit einem zeitreisenden Debugger.

Sie können Redux zusammen mit React oder mit jeder anderen Ansichtsbibliothek verwenden. Es ist winzig (2 KB, einschließlich Abhängigkeiten).

Gemäß der Dokumentation gibt es drei Prinzipien für ReduxFolgendes:

1. Eine einzige Quelle der Wahrheit

2. Der Status ist schreibgeschützt

3. Änderungen werden mit reinen Funktionen vorgenommen

Wenn Sie also in einem einzigen Geschäft nachverfolgen müssen, was Ihnen in Ihrer Anwendung gefällt, ist Redux praktisch. Sie können überall in Ihrer App und auf jeder Route darauf zugreifen ... einfach mit store.getState();

Auch mit der Middleware Redux können Sie den Status viel besser verwalten. Auf der offiziellen Seite von Redux finden Sie eine Liste praktischer Komponenten und Middleware!

Wenn Ihre Anwendung mit vielen Komponenten, Status und Routing groß sein soll, versuchen Sie einfach, Redux von Anfang an zu implementieren! Es wird Ihnen sicher auf dem Weg helfen!

Wenn wir eine Anwendung schreiben, müssen wir den Status der Anwendung verwalten. Der React verwaltet Zustände lokal innerhalb der Komponente, wenn wir die Zustände zwischen Komponenten teilen müssen, die wir mit Requisiten oder Rückrufen verwenden können.

Mit zunehmender Anwendungsanwendung wird es jedoch schwierig, Zustände und Zustandstransformationen zu verwalten. Zustands- und Zustandstransformationen müssen ordnungsgemäß nachverfolgt werden, um die Anwendungen zu debuggen.

Redux ist ein vorhersehbarer Statuscontainer für JavaScript-Apps, der Status- und Statusumwandlungen verwaltet und häufig mit React verwendet wird.

Das Konzept des Redux kann im folgenden Bild erläutert werden.

Wenn der Benutzer eine Aktion auslöst, wenn der Benutzer mit der Komponente interagiert und eine Aktion zum Speichern ausgelöst wird, akzeptiert der Reduzierer im Speicher die Aktion und aktualisiert den Status der Anwendung und wird in der anwendungsweiten unveränderlichen globalen Variablen gespeichert, wenn eine Aktualisierung im Speicher vorhanden ist Die entsprechende Ansichtskomponente, die den Status abonniert hat, wird aktualisiert.

Da der Status global und mit Redux verwaltet wird, ist die Wartung einfacher.

So funktioniert Redux. Eine Aktion wird aus einer beliebigen Komponente oder Ansicht ausgelöst. Die Aktion MUSS die Eigenschaft "Typ" haben und kann jede Eigenschaft sein, die Informationen über die aufgetretene Aktion enthält. Die in Aktion übergebenen Daten können für verschiedene Reduzierer relevant sein, sodass dasselbe Objekt an verschiedene Reduzierer übergeben wird. Jeder Reduzierer nimmt seinen Teil / Beitrag zum Staat. Die Ausgabe wird dann zusammengeführt und ein neuer Status wird gebildet, und die Komponente, die für das Statusänderungsereignis abonniert werden muss, wird benachrichtigt.

Im obigen Beispiel hat die braune Farbe alle 3 Komponenten RGB. Jeder Reduzierer erhält die gleiche braune Farbe und trennt seinen Beitrag zur Farbe.

Nachdem ich Redux verwendet hatte und es persönlich als umständlich empfand, stellte ich fest, dass das Weitergeben eines Objekts an meine Komponenten als Requisite eine viel einfachere Möglichkeit sein kann, den Zustand aufrechtzuerhalten. Ganz zu schweigen davon, dass es eine einfache Möglichkeit ist, Verweise auf Funktionen zu erstellen, um andere Komponenten aufzurufen. Es kann viele der umständlichen Probleme beim Weiterleiten von Nachrichten zwischen Komponenten in React lösen, also ist es eine Zwei für Eins.