Übergeben von Requisiten zur Reaktivverdünnung der Containerkomponente

Question

Ich habe eine Reaktiv-Redux-Containerkomponente, die in einer React Native Navigator-Komponente erstellt wird. Ich möchte in der Lage sein, den Navigator als Requisite an diese Container-Komponente zu übergeben, so dass nach dem Drücken einer Schaltfläche innerhalb ihrer Darstellungskomponente ein Objekt auf den Navigator-Stack geschoben werden kann.

Ich möchte dies tun, ohne alle Codeleser schreiben zu müssen, die die react-redux container-Komponente mir gibt (und auch nicht alle Optimierungen verpassen, die reactive-redux mir auch hier geben würde).

Beispiel Container Komponentencode:

const mapStateToProps = (state) => { 
    return { 
     prop1: state.prop1, 
     prop2: state.prop2 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSearchPressed: (e) => { 
      dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator 
     } 
    } 
} 

const SearchViewContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(SearchView) 

export default SearchViewContainer 

Und ich würde will die Komponente so nennen können, aus meinem Navigator renderScene Funktion:

<SearchViewContainer navigator={navigator}/> 

Im Container Code oben, Ich müsste auf diese übergebene Requisite innerhalb der mapDispatchToProps-Funktion zugreifen können.

Ich habe keine Lust, den Navigator auf dem Redux-Statusobjekt zu speichern und möchte die Prop nicht an die Präsentationskomponente übergeben.

Gibt es eine Möglichkeit, eine Requisite an diese Container-Komponente zu übergeben? Alternativ, gibt es irgendwelche alternativen Ansätze, die ich übersehe?

Danke.

Answer 1

mapStateToProps und mapDispatchToProps beide nehmen ownProps als zweites Argument übergeben Requisiten Zugang geben.

[mapStateToProps(state, [ownProps]): stateProps] (Function): 
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 

Für reference

Answer 2

Sie können in einem zweiten Argument mapStateToProps(state, ownProps) geben, die Sie an die in die Komponente in mapStateToProps

Answer 3

Wenn Sie Dekorateure verwenden, geben Sie den Code unten ein Beispiel für den Fall, dass Sie für Ihre redux Dekorateure verwenden möchten verbinden.

@connect(
    (state, ownProps) => { 
     return { 
      Foo: ownProps.Foo, 
     } 
    } 
) 
export default class Bar extends React.Component { 

Wenn Sie jetzt this.props.Foo überprüfen Sie die Stütze sehen, die von wo aus die Bar Komponente verwendet wurde hinzugefügt.

<Bar Foo={'Baz'} /> 

In diesem Fall this.props.Foo wird die Zeichenfolge

Hoffnung 'Baz', dies einige Dinge klarstellt.