2016-06-12 29 views
40

Ho un componente contenitore react-redux che viene creato all'interno di un componente React Native Navigator. Voglio essere in grado di passare il navigatore come supporto a questo componente contenitore in modo che dopo aver premuto un pulsante all'interno del suo componente di presentazione, possa spingere un oggetto nella pila del navigatore.Passare oggetti di scena per reagire-redux componente container

Voglio farlo senza dover scrivere a mano tutto il codice boilerplate che mi dà il componente contenitore react-redux (e anche non perdere tutte le ottimizzazioni che reagiscono-redux mi darebbe anche qui).

esempio di codice componente contenitore:

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 

E vorrei essere in grado di chiamare il componente come questo da dentro il mio funzione di navigatore renderScene:

<SearchViewContainer navigator={navigator}/> 

Nel codice del contenitore sopra, Dovrei essere in grado di accedere a questo oggetto passato dalla funzione mapDispatchToProps.

Non mi piace memorizzare il navigatore sull'oggetto redux state e non voglio passare il puntello al componente di presentazione.

C'è un modo per passare un puntello a questo componente contenitore? In alternativa, ci sono degli approcci alternativi che sto trascurando?

Grazie.

risposta

69

mapStateToProps e mapDispatchToProps sia prendono ownProps come secondo argomento.

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

Per reference

8

è possibile passare in un secondo argomento a mapStateToProps(state, ownProps) che vi darà accesso ai puntelli passati nel componente in mapStateToProps

+0

Come posso accedere ad esso in mapDispatchToProps? – Michael

+1

@Michael allo stesso modo, puoi usare il secondo argomento –

0

Se si utilizza decoratori, il codice qui sotto fare un esempio, nel caso che si desidera utilizzare per la vostra decoratori redux connettersi.

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

Se ora si seleziona this.props.Foo vedrete il puntello che è stato aggiunto dal punto in cui è stata utilizzata la componente Bar.

<Bar Foo={'Baz'} /> 

In questo caso this.props.Foo sarà la stringa 'Baz'

Spero che questo chiarisce alcune cose.

Problemi correlati