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.
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 ?
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);
Commentaire le plus utile
je ferais comme ça :