2016-09-20 3 views
0

ich eine App Komponente haben, die zu einem redux Speicher verbunden ist:Reagieren Router mit Redux: Pass nur notwendig, Requisiten nach unten auf das Kind Ebene Routen

import React from 'react' 
import { connect } from 'react-redux' 

function App(props) { 
    return (
    <div> 
     {props.children} 
    </div> 
); 
} 

function mapStateToProps(state) { 
    return { 
    todos: state.something 
    } 
} 

export default connect(mapStateToProps)(App) 

App ist die Root-Ebene Komponente in meinem Router Hierarchie reagieren und so empfängt alle Kinder Routen wie Kinder:

export default(
    <Route component={App} path="/"> 
    <IndexRoute component={Home} /> 
    <Route component={PageNotFound} path="*" /> 
    </Route> 
); 

ich die Requisiten in der Lage sein wollen, zu übergeben, um App über mapStateToProps zu geordneten Komponenten übergeben werden. Es scheint der akzeptierte Weg dies zu tun ist, zu verwenden, um Requisiten an Kinder übergeben zu können (How to pass props to {this.props.children}). So ist der Code in dem ersten Schnipsel oben:

<div> 
    {props.children} 
</div> 

wird:

<div> 
    {React.cloneElement(props.children, { ...props } 
</div> 

ich das ziemlich hässlich finden, weil es bedeutet, dass ich blind alle Requisiten aus meiner angeschlossenen App Komponente in meine Kindern Route Komponenten am Übergang .

Ist das wirklich der akzeptierte Weg, dies zu tun?

+0

Ich frage mich, ob das vielleicht ein Ansatz ist, der verwendet wird? http://stackoverflow.com/questions/36730619/unable-to-pass-redux-store-beyond-react-router/39300618#39300618 –

+1

Wenn Sie nicht wollen, dass alle Requisiten "blind" weitergegeben werden, können Sie sich verbinden 'your' Home' oder andere Komponenten, wie Sie es mit Ihrer 'App'-Komponente gemacht haben und haben jeweils eine andere 'mapStateToProps'-Funktion. –

+0

@MarioTacke danke. Macht Sinn. –

Antwort

2

Wenn Sie wissen, welche Requisiten in mapStateToProps erstellt wurden, können Sie nur diese extrahieren und weitergeben.

Auch könnte es hilfreich sein, wenn Sie eine einzelne Stütze mit allen notwendigen Daten aus mapStateToProps zurückkehren, wollen wir es componentState nennen:

function mapStateToProps({todos, somethingElse}) { 
    return { 
    componentState: { todos, somethingElse } 
    } 
} 

dann später können Sie nur diese einzige Stütze überliefern

<div> 
    {React.cloneElement(props.children, { componentState: this.props.componentState } 
</div> 
+0

Ja, das ist ein guter Ansatz. Es endete damit, dass jede Routenkomponente ein verbundener Container mit einem mapStateToProps war. –

Verwandte Themen