Mam komponent kontenera React-Redux, który jest tworzony w komponencie React Native Navigator. Chcę mieć możliwość przekazania nawigatora jako rekwizytu do tego komponentu kontenera, tak aby po naciśnięciu przycisku wewnątrz jego komponentu prezentacyjnego mógł umieścić obiekt na stosie nawigatora.
Chcę to zrobić bez konieczności ręcznego pisania całego standardowego kodu, który daje mi komponent kontenera reag-redux (a także nie przegapić wszystkich optymalizacji, które dałoby mi tu także reakcja-redux).
Przykładowy kod komponentu kontenera:
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
Chciałbym móc wywołać komponent w ten sposób z poziomu mojej renderScene
funkcji nawigatora :
<SearchViewContainer navigator={navigator}/>
W powyższym kodzie kontenera musiałbym mieć dostęp do tej przekazanej właściwości z poziomu mapDispatchToProps
funkcji.
Nie mam ochoty przechowywać nawigatora w obiekcie stanu redux i nie chcę przekazywać rekwizytu do komponentu prezentacji.
Czy istnieje sposób, aby przekazać propozycję do tego komponentu kontenera? Alternatywnie, czy są jakieś alternatywne podejścia, których pomijam?
Dzięki.
źródło
Jest kilka pułapek podczas robienia tego z maszynopisem, więc oto przykład.
Jeden problem polegał na tym, że gdy używasz tylko dispatchToProps (i nie mapujesz żadnych właściwości stanu), ważne jest, aby nie pomijać parametru stanu (można go nazwać przedrostkiem podkreślenia).
Innym problemem było to, że parametr ownProps musiał zostać wpisany przy użyciu interfejsu zawierającego tylko przekazane właściwości - można to osiągnąć, dzieląc interfejs props na dwa interfejsy, np.
interface MyComponentOwnProps { value: number; } interface MyComponentConnectedProps { someAction: (x: number) => void; } export class MyComponent extends React.Component< MyComponentOwnProps & MyComponentConnectedProps > { ....// component logic } const mapStateToProps = ( _state: AppState, ownProps: MyComponentOwnProps, ) => ({ value: ownProps.value, }); const mapDispatchToProps = { someAction, }; export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
Komponent można zadeklarować przekazując pojedynczy parametr:
źródło
Korzystanie z dekoratorów (@)
Jeśli używasz dekoratorów, poniższy kod daje przykład w przypadku, gdy chcesz użyć dekoratorów do połączenia redux.
@connect( (state, ownProps) => { return { Foo: ownProps.Foo, } } ) export default class Bar extends React.Component {
Jeśli teraz sprawdzisz
this.props.Foo
, zobaczysz rekwizyt, który został dodany z miejsca, w którymBar
komponent został użyty.<Bar Foo={'Baz'} />
W tym przypadku
this.props.Foo
będzie to ciąg „Baz”Mam nadzieję, że to wyjaśnia kilka rzeczy.
źródło