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 renderScenefunkcji nawigatora :

<SearchViewContainer navigator={navigator}/>

W powyższym kodzie kontenera musiałbym mieć dostęp do tej przekazanej właściwości z poziomu mapDispatchToPropsfunkcji.

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.

mapStateToPropsi mapDispatchToPropsobaj przyjmują ownPropsjako drugi argument.

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

W celach informacyjnych

Możesz przekazać drugi argument, do mapStateToProps(state, ownProps)którego uzyskasz dostęp do właściwości przekazanych do komponentu w mapStateToProps

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:

<MyComponent value={event} />

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órym Barkomponent został użyty.

<Bar Foo={'Baz'} />

W tym przypadku this.props.Foobędzie to ciąg „Baz”

Mam nadzieję, że to wyjaśnia kilka rzeczy.