Reaktif bileşen konteynır bileşenine geçiş yapma

Question

Bir Reaktif Yerli Navigator bileşeninde oluşturulan bir reaksiyon redüksiyon konteynır bileşenim var. Gezgini bu kapsayıcı bileşeni için bir pervane olarak geçirebilmek istiyorum, böylece bir bileşenin sunum bileşeninin içine basıldıktan sonra, bir nesneyi gezici yığının üzerine itebilir.

Bunu yapmak için, tepkisel reduks konteyneri bileşeninin bana verdiği tüm boilerplate kodunu yazmadan (ve ayrıca tepki-redux'un da bana vereceği tüm optimizasyonları gözden kaçırmayın) yazmasını istiyorum.

Örnek konteyner bileşeni kod:

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 

Ve ben gezgini renderScene işlev içinde böyle bileşeni arama yapabilmek isterdim: konteyner kodunda

<SearchViewContainer navigator={navigator}/> 

yukarıdaki, Bu geçiş pervanesine mapDispatchToProps işlevinden erişebilmem gerekir.

Navigatoru redux state nesnesinde saklamaktan hoşlanmıyorum ve pervane sunum bileşenine geçmek istemiyorum.

Bu kapsayıcı bileşenine bir pervane içinde geçiş yapmamın bir yolu var mı? Alternatif olarak, baktığım alternatif yaklaşımlar var mı?

Teşekkürler.

Answer 1

mapStateToProps ve mapDispatchToProps hem ikinci argüman olarak ownProps almak sen mapStateToProps bileşene geçti sahne erişim verecektir mapStateToProps(state, ownProps) ikinci bir argüman iletebilirsiniz. reference

Answer 2

Sen

Answer 3

için

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

Eğer dekoratörler kullanıyorsanız, aşağıdaki kod, redux bağlamak için dekoratörler kullanmak istediğiniz durumda bir örnek vermek.

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

şimdi işaretlerseniz this.props.Foo Eğer Bar bileşeni kullanıldı yerden eklendi pervane göreceksiniz. Bu durumda this.props.Foo yılında

<Bar Foo={'Baz'} /> 

bu bazı şeyleri açıklık dize 'Baz'

Umut olacaktır.