So berechnen Sie Daten mithilfe von Elementen aus verschiedenen Zweig des Statusbaums in Redux Reactive Native?

Question

Ich bin neu zu Reagieren, Reagieren Native und Redux, also versuche ich, viele dieser Nachrichtenkonzepte für die letzten paar Tage um mich zu wickeln.

Ein Problem, auf das ich gerade stieß, ist das Berechnen neuer Daten in Action Creator, bevor es um das Aktionsobjekt herumgelegt und in einen Reduzierer übergeht, der ein Stück Daten von einem anderen Zweig innerhalb des Zustandsbaums benötigt. Wie würdest du das normalerweise lösen? Ändern Sie die Struktur des globalen Statusbaums oder ordnen Sie diesen Datenabschnitt der Komponente zu, die sie benötigt?

den Zustand Baum Gegeben:

{ 
    ListView:{ 
     dataSource : a ListView.DataSource type 
    } 
    SubmitForm:{ 
     title : 'name of title', 
     text : 'description' 
    } 
    isFetchingData: true/false 
} 

Und angeblich, jeder Zweig von einem anderen Minderer gehandhabt wird, und die Daten jeder Zweig in separate Komponente als Requisiten geben.

Hier ist das Szenario (Ich bin die React tutorial übersetzen Mutter mit Redux reagieren):

1. Schaltfläche Senden in der SubmitForm
2. geklickt wird -> Versand eines Aktionsspeicher zu benachrichtigen, dass sein Daten gesendet, dann async grab und sende {title, text} an den API-Server.
3. Nach Erfolg ---> berechnen Sie die vom API-Server zurückgegebene dataSource und übergeben Sie das Ergebnis dataSource an Reducer (gemäß dem Tutorial). Und ich meine dataSource, ich meine dataSource.cloneWithRows (....) (erklärt here), die die DataSource von ListView wie oben gesehen erfordert.

Also mein Gedanke war die Form-Komponente sollte nicht eine Stütze namens dataSource haben, da dies von einem anderen Zweig in der Status-Struktur ist. Aber ohne es bin ich nicht sicher, wie man die gewünschte dataSource erreicht. Das Ändern (in diesem Fall das Zusammenführen von ListView und SubmitForm) der Struktur des Zustandsbaums wäre auch seltsam, was mein Verständnis des Redux-Musters betrifft. Könnte mir jemand helfen, das herauszufinden? Danke

Answer 1

Danke Jungs. Ich denke, dass ich die beste Lösung gefunden habe, indem ich redux-thunk verwendet habe (naja, ich habe tatsächlich redux-thunk verwendet, um asynchrone Aktionen zu handhaben, aber habe die API nicht gut genug gelesen). Im Grunde wird der Thunk auch mit getState injiziert, so dass der Aufruf von getState() grundsätzlich den Zugriff auf den globalen Statusbaum ermöglicht und das mein Problem lösen sollte.

const actionCreator = (args) => { 
    return (dispatch,getState) => { 
     // dispatch action to notify store that data is being sent 
     fetch(url) 
     .then((response) => response.json()) 
     .then((resData) => { 
      // dispatch action to notify data received 
      // compute new data using resData and current dataSource accessed by getState().ListView.dataSource 
     }) 
    }  
} 

Answer 2

Ich habe dieses Problem vorher gedacht und ich denke, dass das ein Weg sein kann.

Zum Beispiel. Sie haben actionA, reducerA und branchA von speichern. Sie haben actionB, reducerB und branchB von speichern.

Nun möchten Sie BranchA und BranchB gleichzeitig lesen und ändern.

Ok, lassen Sie uns zwei Aktionen definieren.

One in actionA (UnteraktionA), die den BranchA ändern. Eine andere in AktionB (UnteraktionB), die den BranchB ändern.

Und dann definieren Sie eine Gesamtaktion (Total-Aktion), die UnteraktionA und UnteraktionB in Reihenfolge aufrufen.

Das letzte Problem ist "So lesen Sie BranchB in der Unteraktion A".

ok, wir können die Methode 'getState' des Geschäfts verwenden. Wir importieren das Geschäft in die actionA und rufen store.getState() Es wird den gesamten Baum des Ladens zurückgeben.

Answer 3

Dies ist eine häufige Frage, und bequemerweise hat eine Antwort in den Redux FAQ: http://redux.js.org/docs/FAQ.html#reducers-share-state.

Kurze Version: combineReducers löst einen einfachen Anwendungsfall der Aufspaltung von Reducer-Funktionalität nach Domäne/Schicht-of-State. Sie haben das nun hinter sich und müssen jetzt entweder zusätzliche zusätzliche Reduktionslogik auf oberster Ebene hinzufügen, um diese Aktion zu verarbeiten, oder die zusätzlichen benötigten Daten in die Aktion selbst einbeziehen.