En passant accessoires de réagir-redux composant conteneur

J'ai une réaction redux composant conteneur qui est créé à l'intérieur d'une Réagir Natif Navigator composant. Je veux être en mesure de passer le navigateur comme un accessoire de ce composant conteneur de sorte qu'après un clic sur un bouton à l'intérieur de sa présentation, il peut pousser un objet sur le navigateur de la pile.

Je veux faire cela sans avoir besoin d'écrire à la main tous les code réutilisable, que l'réagissent-redux composant conteneur donne moi (et aussi pour ne pas rater toutes les optimisations qui réagissent-redux me donnerait ici aussi).

Exemple composant conteneur code:

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

Et je voulais être en mesure d'appeler le composant comme cela à partir de mon navigateur renderScene fonction:

<SearchViewContainer navigator={navigator}/>

Dans le conteneur code ci-dessus, j'avais besoin d'être en mesure d'accéder à ce passé prop de l'intérieur de la mapDispatchToProps fonction.

Je n'ai pas envie de ranger le navigateur sur le redux d'état de l'objet et ne voulez pas passer l'hélice jusqu'à la présentation de la composante.

Est-il une manière que je peux passer dans une prop de ce composant conteneur? Sinon, existe-il des solutions de rechange qui je suis dominant?

Grâce.

InformationsquelleAutor Michael | 2016-06-12
  1. 110

    mapStateToProps et mapDispatchToProps à la fois prendre ownProps comme deuxième argument.

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

    Pour référence

    InformationsquelleAutor Abhinav Singi
  2. 12

    Vous pouvez passer dans le deuxième argument de mapStateToProps(state, ownProps) qui vous donnera accès à la des accessoires passé dans le composant dans mapStateToProps

    • Comment puis-je obtenir un accès en mapDispatchToProps?
    • de la même manière, vous pouvez utiliser le deuxième argument
    InformationsquelleAutor Conor Hastings
  3. 4

    Il y a quelques pièges courants lors de cette opération avec la machine, voici un exemple.

    Une chasse aux sorcières était lorsque vous utilisez uniquement dispatchToProps (et pas de mappage de tout état d'accessoires, il est important de ne pas omettre l'état param, (il peut être nommé par un trait de soulignement préfixe).

    Un autre piège est que le ownProps param a dû être saisie à l'aide d'une interface contenant seulement le passé accessoires - ceci peut être réalisé par la division de votre accessoires interface en deux interfaces, par exemple

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

    Le composant peut être déclarée en passant le seul paramètre:

    <MyComponent value={event} />
    InformationsquelleAutor Damian Green
  4. 1

    À L'Aide De Décorateurs (@)

    Si vous utilisez des décorateurs, le code ci-dessous donne un exemple dans le cas où vous souhaitez utiliser les décorateurs pour votre redux connecter.

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

    Si vous vérifiez maintenant this.props.Foo vous verrez l'hélice qui a été ajouté à partir d'où la Bar composant a été utilisé.

    <Bar Foo={'Baz'} />

    Dans ce cas this.props.Foo sera la chaîne 'Baz'

    Espère que cela clarifie certaines choses.

    InformationsquelleAutor Joe Lloyd