Wann sollte ich hinzufügen, dass Redux auf eine app Reagieren?

Reagieren, ist ein UI-framework kümmert sich um die Aktualisierung der Benutzeroberfläche in Reaktion auf die "Quelle der Wahrheit", die ist in der Regel beschrieben als ein Zustand "im Besitz" von bestimmten Komponente. Denken Reagieren beschreibt die Reagieren Staatseigentum Konzept sehr gut, und ich empfehle, dass Sie gehen durch Sie.

Dieser Staat das Eigentum Modell funktioniert gut, wenn der Staat ist hierarchisch aufgebaut und mehr oder weniger entspricht der Komponente Struktur. Auf diese Weise bekommt der Staat "verteilt" über viele Komponenten, und die app ist einfach zu verstehen.

Jedoch manchmal weit entfernten teilen der app will Zugriff auf den gleichen Zustand, wenn Sie zum Beispiel cache abgerufenen Daten und möchten konsequent aktualisieren es überall zur gleichen Zeit. In diesem Fall, wenn Sie Folgen Sie den Reagieren, Modell, Sie werden am Ende mit einem Bündel von sehr großen Bauteilen auf der Oberseite der Komponente Baum, übergeben Sie eine Vielzahl von Requisiten nach unten durch einige zwischenkomponenten, die Sie nicht verwenden, nur um zu erreichen ein paar leaf Komponenten, die sich eigentlich kümmern, dass die Daten.

Wenn Sie sich in dieser situation, Sie kann (aber nicht müssen) Sie wieder einmal zu "extrahieren" dieser Zustand management-Logik von der top-level-Komponenten in separate Funktionen, die als "Verzögerer", und "verbinden" leaf Komponenten, die Sorge um, dass der Staat direkt, um es statt der übergabe der Requisiten, der sich durch die ganze app. Wenn Sie don ' T haben dieses problem noch nicht, Sie wahrscheinlich nicht brauchen Redux.

Schließlich ist zu beachten, dass Redux ist nicht eine endgültige Lösung für dieses problem. Es gibt viele andere Möglichkeiten, um verwalten Sie Ihre lokalen Staat außerhalb der Komponenten Reagieren—zum Beispiel, einige Leute, die nicht wie Redux sind zufrieden mit MobX. Ich schlage vor, Sie bekommen zuerst einmal ein festes Verständnis zu Reagieren-state-Modell, und dann bewerten Sie unterschiedliche Lösungen selbstständig, und bauen kleine apps mit Ihnen, um ein Gefühl für Ihre stärken und Schwächen.

(Diese Antwort ist inspiriert von Pete Hunt ' s reagieren-howto guide, ich schlage vor, Sie Lesen es auch.)

Vorbereitet habe ich dieses Dokument zu verstehen Redux. Hoffe, das klärt Ihre doute

-------------------------- REDUX-TUTORIAL ----------------------

AKTIONEN-
Aktionen sind Nutzlasten von Informationen, das senden von Daten aus Ihrer Anwendung in den store. Sie sind die einzige Quelle von Informationen für das Geschäft. Sie können Sie senden
nur mit speichern.dispatch().

   Example-
const  ADD_TODO = 'ADD_TODO'

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

Aktionen sind Reine javascript-Objekt. - Aktion muss [ type] - Eigenschaft gibt den Typ der Aktion, die ausgeführt wird. der Typ sollte als string definiert und konstant.

ACTION CREAToRS-----
---------------- ---- Action-Macher sind genau die Funktion, die Aktion erstellt
Es ist leicht zu verschmelzen die Begriffe handeln und handeln Schöpfer.
In der redux-action, der Schöpfer gibt eine Aktion.

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

zu initialte Versand übergeben das Ergebnis ato die dispatch () - Funktion.

1. Versand(addToDo(text));
2. Versand(completeToDo(index))

Alernativly können Sie erstellen eine gebundene Aktion Schöpfer gibt, der wird automatisch löst.

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

nun können Sie disrectly nannte ihn

boundaddTodO(text);

Dispatch() functionn können direkt aus dem Shop.dispatch(). aber wir
access es über eine helper-Methode connect ().

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

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

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

Aktionen Schöpfer

export-Funktion addToDO(text){
return {
Typ: ADD_TODO,
text
}
}

.........................REDUZIERSTÜCKE..................................

Reduzierer, die angeben, wie die Anwendungen sich der Zustand ändert, in Reaktion auf die Aktionen an die Filiale gesendet.

Gestaltung der staatlichen shap

In redux alle applciation Zustand ist der Shop in einzelne Objekt. speichert man einige Daten sowie einige state.

{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: "Erwägen Sie die Verwendung redux',
abgeschlossen: true
},
{
text: "Kepp alle, die den Staat in einzigen Baum'
}
]
}

Umgang Mit Aktionen
---------------- die Reduzierstücke sind, die reinen Funktionen, die den vorherigen Zustand und eine sction, und geben Sie einen neuen Staat.

(previousState, action) => newState

Wir beginnen mit der Angabe der Initialen Zustand. Redux rufen unsere Reduzierstücke mit einem undefinierten Zustand für die erste Zeit. dies ist unsere chance, um den Zustand unserer app.

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;
}

können Sie das gleiche tun mit ES6 Umgang mit der JS

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

................................. SPEICHERN...................................

Store ist ein Objekt, das Sie zusammenbringt. der store hat folgende Verantwortung

1. halten, den Zustand der Anwendung
2. ermöglichen den Zugang zum Staat über getState()
3. Ermöglichen Staates aktualisiert werden via dispatch()
4. Registrieren listerneres über suscriber(listener)

Hinweis. verwenden combineReducers() kombinieren mehrere Reduzierstücke in einem.

const store = createStore(todoapp); //das todoapp sind die Reduzierstücke

Wenn wir schreiben-Anwendung, die wir brauchen, um zu verwalten Status der Anwendung.
Reagieren die Staaten verwaltet, lokal in der Komponente, wenn wir teilen müssen, die Staaten zwischen Komponenten, die wir verwenden können, Requisiten oder Rückrufe.

Aber als Anwendung wächst, wird es schwierig zu verwalten, Staaten und Staatliche Transformationen.Staat und Staatliche Transformationen brauchen, um richtig verfolgt, um das Debuggen der Anwendungen.

Redux ist ein vorhersehbarer Zustand, container für JavaScript-apps, die es schafft Staat und Staatliche Transformationen und wird oft mit Reagieren,

Dem Konzept der redux erklärt werden kann, ist im folgenden Bild.

Wenn der Benutzer eine Aktion auslöst, wenn der Benutzer mit der Komponente interagieren und eine Aktion ausgelöst und lagern sich dann an den reducer in der Shop akzeptiert die action-und update-Status der Anwendung und in der Anwendung gespeichert Breite unveränderliche Globale variable, wenn es ein update im store die entsprechende view-Komponente abonniert den Staat, werden aktualisiert.

Denn der Staat wird Global verwaltet und mit redux es ist einfacher zu pflegen.