React Redux - Suche nach einem Anwendungsfall für connect()

Question

Hinweis: Ich verwende React Native, aber dies gilt auch für Reactjs. Ich verwende nur zustandslose funktionale Komponenten. Ich möchte so viel wie möglich funktionale Programmierung lernen und verwenden. Bedeutet das im Wesentlichen, dass ich niemals connect() von react-redux verwenden kann? Sollte ich meinem App-Design weitere Containerkomponenten hinzufügen? Hier

ist ein Beispiel für meine Komponenten:

export const Height = (props, { store }) => { 
    const state = store.getState() 
    return (
    <View style={formStyles.container}> 
     <DimenInput 
     value={state.get('height').get('height1').toString()} 
     onChangeText={text => store.dispatch(updateHeight(text, 1))} 
     /> 
     <Text style={formStyles.text}>{'&'}</Text> 
     <DimenInput 
     value={state.get('height').get('height2').toString()} 
     onChangeText={text => store.dispatch(updateHeight(text, 2))} 
     /> 
    </View> 
) 
} 
Height.contextTypes = { 
    store: React.PropTypes.object 
} 

Ich möchte auch alle gängigen redux und reagieren Techniken lernen, die ich in der Branche sehen, so wollte ich mapStateToProps() und connect() lernen. Ich begann über diese Funktionen für meine Komponente, um zu versuchen und zu erstellen: Realisierung

const mapStateToProps = (state) => { 
    return state.get('height').get('height1').toString() 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onHeightChanged: (text) => {dispatch(updateHeight(text, 1))} 
    } 
} 

Davor habe ich nicht, diese Funktionen auf dieser staatenlosen Komponente verwenden kann. Ich muss sie auf einem Container-Komponente verwenden, der diese Komponente im Wesentlichen halten würde, aber ich wirklich ein nicht haben, der Behälter dieser Komponente ist:

export const Volcalc =() => { 
    return (
    <View style={styles.container}> 
     <Text style={styles.text}>HEIGHT</Text> 
     <Height/> 
     <Text style={styles.text}>WIDTH</Text> 
     <Width/> 
    </View> 
) 
} 

Und dann der Behälter das ist nur:

const App =() => { 
    return (
    <Provider store={store}> 
     <Volcalc/> 
    </Provider> 
) 
} 

Die App, die ich mache, ist eine einzige Form - so ist es winzig. In diesem Stadium kann ich keine Situation sehen, in der ich eine Behälterkomponente benutzen müsste. In einer größeren App würde ich gezwungen werden, Container-Komponenten zu verwenden, und dann werde ich die Möglichkeit bekommen, connect() zu verwenden? Welche Technik ist besser, wenn Sie nur Staatenlose verwenden und einen Container verwenden, der mit connect() erstellt wurde, wenn es so oder so gemacht werden könnte?

Edit: this egghead lesson tut etwas dazwischen, wo sie haben eine stateless Komponente AddTodo die dispatch aus dem Laden verwendet und sie nennen connect() darauf. Möglicherweise das Szenario, das meinem Anwendungsfall für Height passen würde, obwohl ich es den vollen Speicher weiterreichen muss, da es store.get und store.dispatch verwendet - es sei denn, ich übergebe es den Speicherwert für Höhe statt des vollen Speichers.

Answer 1

Durch auf einem Container-Komponente verbinden verwenden Sie Ihre App funktional halten. Ihre Daten fließen an Kinder weiter. Dein Zustand ist unveränderlich.

Container-Komponenten sind in Bezug auf die Verbindung nützlich, da Sie Ihren Anruf im Geschäft isolieren und die Daten wiederum in untergeordnete Komponenten fließen lassen. Es ist nur eine gute Möglichkeit, Ihre App zu strukturieren und die Anzahl der Punkte zu reduzieren, die der Store in Ihrer App genannt wird. Es macht die Entwicklung viel einfacher zu verwalten und bietet weniger Möglichkeiten, Chaos zu verursachen.

Answer 2

Sie müssen nicht connect() verwenden, aber Ihre Komponenten werden dann enger mit redux gekoppelt. Wenn Sie über einen Höhencontainer verfügen, können Sie diesen reduktiven Speichercode aus der Höhenkomponente entfernen und ihn problemlos für andere nicht-reduktive Projekte wiederverwendbar machen.

Answer 3

Die Verwendung der Klasse als objektorientiertes Muster und einige funktional orientierte Muster ergeben zusammen ein schönes Ergebnis. Es ist perfekt, wenn Sie Ihre funktionalen Programmierfähigkeiten üben möchten, aber leider, wenn Sie dies für eine ernstere Anwendung tun, werden Sie eine Menge Vorteile von reagieren und redux verlieren. Dinge wie Staat, Ihre Anwendung wird schwer zu aktualisieren sein. Ihr Code wird gekoppelt. und nah an Modifikationen. In einer größeren Anwendung finden Sie es frustrierend, sie zu entwickeln. Ich habe den genau gleichen Weg vor nicht langer Zeit genommen und ich genieße es, zu reagieren und redux viel mehr beide zu mischen. Das ist meine Meinung. Wenn Sie connect, component state und die meisten Vorteile von react und redux nutzen möchten, um sie voll funktionsfähig zu halten, können Sie React.createClass() verwenden, das ist eine Funktion, die ein Objekt mit einer anderen Funktion empfängt. Anstatt den Komponentenstatus im Klassenkonstruktor zu initialisieren, verwenden Sie in diesem Fall eine Funktion getInitialState. Container sind sehr nützlich, um wiederverwendbare Komponenten zu erhalten. Ein weiteres Problem besteht darin, redox-Requisiten auf einige Komponenten zu übertragen. Mit einer kleinen App ist es einfach, diese Requisiten nicht mehr als 3 Level tief zu geben, aber in einer großen App ist es nicht. Stellen Sie sich vor, jedes Mal, wenn sich Ihr Redux-Status ändert, Ihre gesamte App erneut gerendert wird und Sie Ihre Daten nicht verlieren, müssen Sie diese Daten in Ihrem Redux-Status speichern.Ihr Reduxspeicher wird zu groß sein und wird nutzlose Daten und Daten enthalten, die nicht dort sein sollten.

Zusammengefasst, das ist völlig in Ordnung, eine kleine App im voll funktionsfähigen Modus zu machen, aber für eine größere App werden Sie zu viel Reaktion und redux Vorteile verlieren, so dass Ihre App schwer zu ändern und zu entwickeln.

Answer 4

Es ist gut, die Gedanken anderer Leute zu sehen, weil ich neu reinkomme. Aber ich sammle von den anderen Antworten auf dieser Frage, dass es einige Leistungsoptimierungen gibt, die connect() aufpasst und es auch gut ist, den ganzen Speicher zu einer Komponente nicht zu übergeben, weil das reagierte erweiterte Kontextmerkmal instabil ist und es auch die Komponente koppelt Reduzieren Sie, wenn Sie den Redox-Speicher in der Komponente verwenden.

Ich habe die Tutorials etwas mehr durchgegangen und habe festgestellt, dass ich connect() auf meiner zustandslosen Komponente verwenden kann, die die oben genannten Vorteile bietet.

Code:

const mapStateToProps = (state) => { 
    return { 
    height1: state.get('height').get('height1').toString(), 
    height2: state.get('height').get('height2').toString() 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    updateHeight: (text, number) => { 
     dispatch(updateHeight(text, number)) 
    } 
    } 
} 

let Height = (props) => { 
    return (
    <View style={formStyles.container}> 
     <DimenInput 
     value={props.height1} 
     onChangeText={text => props.updateHeight(text, 1)} 
     /> 
     <Text style={formStyles.text}>{'&'}</Text> 
     <DimenInput 
     value={props.height2} 
     onChangeText={text => props.updateHeight(text, 2)} 
     /> 
    </View> 
) 
} 
Height.propTypes = { 
    height1: React.PropTypes.string.isRequired, 
    height2: React.PropTypes.string.isRequired, 
    updateHeight: React.PropTypes.func.isRequired 
} 

Height = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Height)