Zustand in redux / react App hat eine Eigenschaft mit dem Namen des Reduzierers

8

Ich erstelle eine App mit Redux und React. Ich stoße auf ein Problem, bei dem ich den Status der Komponenteneigenschaften nicht zuordnen kann, da der Status eine Eigenschaft hat, die mit dem Namen des verwendeten Reduzierers übereinstimmt.

Der Wurzelreduzierer wird mit combineReducers method

erstellt %Vor%

Der Ausgangszustand ist

%Vor%

Allerdings in der Komponentenfunktion mapStateToProps :

%Vor%

Das state.sources ist undefined , weil der Wert des Parameters state

ist %Vor%

Ist das ein Merkmal von Redux? Wenn ich also mehr Reduktoren verwende, fügen alle von ihnen eine neue Eigenschaft zu state variable hinzu? Oder ist etwas auf meiner Seite falsch (ich habe dieses Verhalten in Redux Tutorials nie bemerkt).

Danke

    
Karel Frajták 27.02.2016, 09:00
quelle

2 Antworten

18

Wenn Sie nur einen einzigen Reduzierer haben, brauchen Sie combineReducers() nicht. Benutze es direkt:

%Vor%

Jetzt können Sie ein Geschäft mit diesem Reduzierer erstellen:

%Vor%

Und verbinden Sie eine Komponente mit ihm:

%Vor%

Allerdings ist Ihr Reducer schwer zu lesen, da er viele verschiedene Dinge auf einmal aktualisiert. Nun, dies ist der Moment, an dem Sie es in mehrere unabhängige Reduzierungen aufteilen möchten:

%Vor%

Dies ist einfacher zu warten und zu verstehen, und es erleichtert auch das unabhängige Ändern und Testen von Reduzierern.

Schließlich können wir als letzten Schritt combineReducers() verwenden, um die Wurzel app reducer zu erzeugen, anstatt sie von Hand zu schreiben:

%Vor%

Es ist kein großer Vorteil, combineReducers() zu verwenden, anstatt den Wurzelreduzierer von Hand zu schreiben, außer dass es etwas effizienter ist und Ihnen wahrscheinlich ein paar Tippfehler ersparen wird. Sie können dieses Muster auch mehrfach in Ihrer App anwenden: Es ist in Ordnung, nicht zusammenhängende Reduzierungen mehrere Male in einem einzigen Reduzierer verschachtelt zu kombinieren.

Dieses Refactoring hätte keine Auswirkungen auf die Komponenten.

Ich würde Ihnen empfehlen, meinen kostenlosen Egghead-Kurs auf Redux anzusehen, der dieses Muster von Reduktionsmittelzusammensetzung und zeigt, wie combineReducers() implementiert ist.

    
Dan Abramov 27.02.2016, 19:20
quelle
5

Eigentlich glaube ich, dass Ihr Ausgangszustand wäre:

%Vor%

Das liegt daran, dass combineReducers funktioniert, indem es den Namen des Reduzierers verwendet und seinen Inhalt auf diesen Namen abbildet.

Auch nur eine Anmerkung, aber wenn Sie mehr als einen Reducer verwenden, sollten die Namen Ihrer Reducer spezifischer als appReducer sein, und (nur meine persönliche Meinung) sie brauchen das Wort nicht %Code%. Eine typische App könnte so aussehen:

%Vor%

Dann könnte Ihr Zustand wie folgt aufgerufen werden:

%Vor%     
Joshua Comeau 27.02.2016 12:03
quelle

Tags und Links