En passant accessoires de réagir-redux composant conteneur

Question

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 de 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 de:

<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 l' 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 possible que je puisse passer dans une prop de ce composant conteneur? Sinon, existe-il des solutions de rechange qui je suis dominant?

Merci.

Answer 1

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

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

Pour référence

Answer 2

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

Answer 3

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

Un piège a été lorsque vous êtes seulement en utilisant 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} />

Answer 4

À 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 se connecter.

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

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

<Bar Foo={'Baz'} />

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

Espérons que cela clarifie certaines choses.