Wie temporäre Zustände in ReactRedux erstellen?

Question

Ich habe Redux seit einem Monat verwendet und wenn ein Projekt wirklich groß wird, scheint es nicht notwendig, die gesamte App allen Werten eines Reducers auszusetzen. Gibt es eine gute Möglichkeit, temporäre Zustände zu erstellen oder einzelne Zustände für Komponenten zu erstellen?

Denke ich an alles falsch oder ist es aus einem bestimmten Grund so strukturiert?

Answer 1

Ich nehme an "Werte von jedem Reduzierer" beziehen Sie sich auf den gesamten App-Zustand.

Sie können Ihren Zustand aufteilen und nur die benötigten Teile für bestimmte Komponenten freilegen. Das ist, was die connect-Methode von der react-redux Bindungen für ist. connect übernimmt eine Funktion (z. B. mapStateToProps), die wiederum den gesamten App-Status annimmt und nur die Teile anzeigt, die Sie als Requisiten für die Komponente festlegen, die Sie mit redux verbinden.

Beispiel: Angenommen, Sie haben eine einfache Komponente wie diese reagieren, die den Namen und die Adresse des Benutzers zeigt:

var myComponent = React.createClass({ 
    render: function() { 
    return (
     <div>{Name from redux state goes here}</div> 
     <div>{Address from redux state goes here}</div> 
    ); 
    } 
}); 

Offensichtlich brauchen Sie nicht Ihren gesamten App-Status auf diese Komponente zu senden, nur das Stück mit dem Namen und der Adresse des Benutzers. So verwenden Sie connect wie so:

// the "state" param is your entire app state object. 
function mapStateToProps(state) { 
    return { 
    name: state.name, 
    address: state.address 
    } 
} 

var connectedComponent = connect(mapStateToProps)(myComponent); 

Die umwickelte myComponent jetzt sieht effektiv wie folgen aus:

var myComponent = React.createClass({ 
    propTypes: { 
    name: React.PropTypes.string // injected by connect 
    address: React.PropTypes.string // injected by connect 
    }, 

    render: function() { 
    return (
     <div>{this.props.name}</div> 
     <div>{this.props.address}</div> 
    ); 
    } 
}); 

Answer 2

Nach dem Redux docs:

Der Zustand Ihrer gesamten Anwendung wird in einem Objektbaum gespeichert innerhalb einem einzigen Geschäft.

Ein Zustand. Ein Geschäft. Das ist es. Sie können lokale Status in Ihren einzelnen Komponenten erstellen, die durch den größeren Anwendungsstatus informiert werden, aber an diesem Punkt kopieren Sie nur Teile des bereits vorhandenen größeren Status.

Denken Sie daran, dass Sie in einer komplexen App nicht den gesamten Status für Ihre "intelligenten" Komponenten verfügbar machen. Selbst wenn Sie 100 Reduzierfunktionen haben, können Sie connect a component to the storemapStateToProps verwenden, um nur die Teile des gewünschten Anwendungsstatus auszuwählen und Requisiten für Ihre Komponente daraus zu erstellen. Sie würden also niemals alle Teile des Staates sehen, die Sie nicht benutzen, selbst wenn Sie wissen, dass sie existieren.

Das ist wirklich ein großes architektonisches Muster. Mit einem Zustand haben Sie eine single source of truth. Aus diesem Grund ist es für einen Teil Ihrer App unmöglich, veraltete Daten zu haben. Denken Sie daran, dass Sie nur Ihren Status Struktur definieren, wenn Sie Ihren Anwendungsstatus initialisieren und nicht alle Daten laden. Daher wird durch die Initialisierung der gesamten Struktur zu Beginn keine Leistung beeinträchtigt. Und wieder werden Sie niemals den gesamten Anwendungsstatus in eine einzelne Komponente laden (es sei denn, dies ist erforderlich), damit Ihre Requisiten immer überschaubar sind.