Wie mache ich so etwas wie reduce `connect()` - setze Requisiten zur Deklarationszeit auf eine Komponente?

Question

Wenn ich dies tun:

function mapStateToProps(state, props) { 
    return { 
     contacts: buildClientContacts(state) 
    } 
} 

export default connect(mapStateToProps)(Contacts) 

ich eine Komponente wie Contacts Export am Ende, außer connect die contacts Stütze auf es für mich gesetzt hat (und redux die verwendet state die contacts Stütze zu bauen).

Wie kann ich das Gleiche tun - eine Komponente basierend auf einer anderen deklarieren, indem ich ihr Requisiten hinzufüge?

Der Grund, warum ich dies tun möchte, ist, dass ich einige Requisiten auf die Komponente, die nichts mit redux zu tun haben, statt der MapToState im Code gezeigt.

Etwas wie folgt aus:

export default <Contacts mydata={somedata: data}> 

(Natürlich kann ich setzen jsx nicht da, aber das ist die Art von Wirkung ich will)

ich dies tun könnte:

function mapStateToProps() { 
    return { 
     mydata: {somedata: data} 
    } 
} 

export default connect(mapStateToProps)(Contacts) 

... aber das ist wirklich redux missbrauchen :)

Answer 1

Ich denke, dass was Sie brauchen, ist ein Higher-Order Component (HOC) . Bitte lesen Sie mehr über dieses Muster here. Laut React docs:

... eine Komponente höherer Ordnung ist eine Funktion, die eine Komponente und eine neue Komponente zurücknimmt.

const EnhancedComponent = higherOrderComponent(WrappedComponent); 

Während eine Komponente Stützen in UI transformiert, eine übergeordnete Komponente transformiert eine Komponente in einer anderen Komponente.

Tatsächlich reduc connect gibt auch HOC zurück.

So können Sie eine HOC erstellen, die erforderliche Daten als Eigenschaft auf der Contacts Komponente festlegen wird. In Ihrem Fall würde es so aussehen:

function contactsWithData(WrappedComponent, data) { 
    return class extends React.Component { 
    render() { 
     return <WrappedComponent mydata={data} {...this.props}/> 
    } 
    } 
} 
... 
export default contactsWithData(Contacts, {somedata: true});