React-dnd: Utilisation de redux connect avec le mappage DropTarget

Créé le 9 févr. 2016  ·  5Commentaires  ·  Source: react-dnd/react-dnd

J'essaie de trouver la bonne façon de connecter le redux à mon composant qui se trouve également être une cible de dépôt.

export default DropTarget(dragTypes, storyTarget, collect)(connect(mapStateToProps)(StoryEditor));

C'est ainsi que je les connecte pour le moment, cela semble fonctionner, mais je voulais vérifier que c'est correct.

Commentaire le plus utile

je ferais comme ça :

import { compose } from 'redux'

export default compose(
  DropTarget(dragTypes, storyTarget, collect),
  connect(mapStateToProps)
)(StoryEditor);

Tous les 5 commentaires

je ferais comme ça :

import { compose } from 'redux'

export default compose(
  DropTarget(dragTypes, storyTarget, collect),
  connect(mapStateToProps)
)(StoryEditor);

Dans la documentation React DnD, @gaearon utilise _.flow pour décorer un composant avec plusieurs composants de niveau supérieur. Donc, si je lis bien, nous pouvons simplement utiliser la fonction compose de redux, n'est-ce pas ?

Le compose @ekeric13 Redux est identique à _.flow avec des arguments inversés. C'est-à-dire,

compose(f, g, h)(x) === flow(h, g, f)(x) === f(g(h(x)))

@gaearon Utiliser compose fonctionne bien pour moi, mais j'ai remarqué que la documentation pour compose dit que la plupart des fonctions passées à composer devraient s'attendre à un seul paramètre, mais nous pouvons passer trois arguments à DropTarget . Pourquoi ça marche ?

composer(...fonctions)

Compose les fonctions de droite à gauche.

Il s'agit d'un utilitaire de programmation fonctionnel, inclus dans Redux pour plus de commodité.
Vous voudrez peut-être l'utiliser pour appliquer plusieurs amplificateurs de magasin à la suite.

Arguments

(arguments) : Les fonctions à composer. Chaque fonction est censée accepter un seul paramètre. Sa valeur de retour sera fournie comme argument à la fonction située à gauche, et ainsi de suite. L'exception est l'argument le plus à droite qui peut accepter plusieurs paramètres, car il fournira la signature de la fonction composée résultante.

BuilderArea.propTypes = {
  addPanel: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  panels: state.panels
});

export default compose(
  DropTarget(Types.PANEL_CARD, builderAreaTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  })),
  connect(
    mapStateToProps,
    { addPanel }
  )
)(BuilderArea);
Cette page vous a été utile?
0 / 5 - 0 notes