Bir React Native Navigator bileşeni içinde oluşturulan bir react-redux konteyner bileşenine sahibim. Gezgini bir destek olarak bu kapsayıcı bileşenine geçirebilmek istiyorum, böylece sunum bileşeninin içinde bir düğmeye basıldıktan sonra, bir nesneyi gezinti yığınına itebilir.

Bunu, react-redux kapsayıcı bileşeninin bana verdiği tüm standart kodu elle yazmaya gerek kalmadan yapmak istiyorum (ve ayrıca react-redux'un burada bana vereceği tüm optimizasyonları da kaçırmayın).

Örnek konteyner bileşeni kodu:

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 bu bileşeni gezgin renderScenefonksiyonumdan şu şekilde çağırabilmek istiyorum :

<SearchViewContainer navigator={navigator}/>

Yukarıdaki kapsayıcı kodunda, bu iletilen pervaneye mapDispatchToPropsişlevin içinden erişebilmem gerekir .

Gezgini yeniden düzenleme durum nesnesinde saklamaktan hoşlanmıyorum ve pervaneyi sunum bileşenine geçirmek istemiyorum.

Bu konteyner bileşenine bir pervane geçirebilmemin bir yolu var mı? Alternatif olarak, gözden kaçırdığım alternatif yaklaşımlar var mı?

Teşekkürler.

mapStateToPropsve mapDispatchToPropsher ikisi ownPropsde ikinci argüman olarak alır.

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

için referans

mapStateToProps(state, ownProps)MapStateToProps içindeki bileşene aktarılan props'a erişmenizi sağlayacak ikinci bir argüman iletebilirsiniz.

Daktilo ile bunu yaparken birkaç sorun var, işte bir örnek.

Yalnızca dispatchToProps kullandığınızda (ve herhangi bir durum propsını eşlemediğinizde), durum parametresini atlamamanız önemlidir (alt çizgi öneki ile adlandırılabilir).

Başka bir bilgi de, ownProps parametresinin yalnızca geçirilen propsları içeren bir arayüz kullanılarak yazılması gerektiğiydi - bu, props arayüzünüzü iki arayüze bölerek elde edilebilir, örn.

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);

Bileşen, tek parametre geçilerek bildirilebilir:

<MyComponent value={event} />

Dekoratörleri Kullanma (@)

Dekoratör kullanıyorsanız, aşağıdaki kod, redux bağlantınız için dekoratör kullanmak istemeniz durumunda bir örnek verir.

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

Şimdi kontrol this.props.Fooederseniz, Barbileşenin kullanıldığı yerden eklenen pervaneyi göreceksiniz .

<Bar Foo={'Baz'} />

Bu durumda this.props.Foo'Baz' dizesi olacaktır

Umarım bu bazı şeyleri açıklığa kavuşturur.