React-dnd: Verwenden von Redux Connect neben DropTarget-Mapping

Erstellt am 9. Feb. 2016  ·  5Kommentare  ·  Quelle: react-dnd/react-dnd

Ich versuche herauszufinden, wie ich Redux an meine Komponente anschließen kann, die zufällig auch ein Drop-Ziel ist.

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

So verbinde ich sie im Moment, es scheint zu funktionieren, aber ich wollte überprüfen, ob dies korrekt ist.

Hilfreichster Kommentar

ich würde es so machen:

import { compose } from 'redux'

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

Alle 5 Kommentare

ich würde es so machen:

import { compose } from 'redux'

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

In der React DnD docs @gaearon Verwendungen _.flow eine Komponente mit mehreren Komponenten höherer Ebene dekorieren. Wenn ich das richtig lese, können wir eigentlich einfach die compose Funktion von Redux verwenden, richtig?

@ekeric13 compose Redux ist identisch mit _.flow mit umgekehrten Argumenten. Das ist,

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

@gaearon Die Verwendung von compose funktioniert für mich gut, aber mir ist aufgefallen, dass die Dokumentation für compose sagt, dass die meisten an Compose übergebenen Funktionen einen einzigen Parameter erwarten sollten, aber wir können drei Argumente an übergeben DropTarget . Warum funktioniert das?

komponieren(...Funktionen)

Stellt Funktionen von rechts nach links zusammen.

Dies ist ein funktionales Programmierprogramm, das in Redux enthalten ist.
Sie können es verwenden, um mehrere Shop-Enhancer hintereinander anzuwenden.

Argumente

(Argumente): Die zu erstellenden Funktionen. Von jeder Funktion wird erwartet, dass sie einen einzelnen Parameter akzeptiert. Der Rückgabewert wird als Argument an die links stehende Funktion übergeben und so weiter. Die Ausnahme ist das Argument ganz rechts, das mehrere Parameter akzeptieren kann, da es die Signatur für die resultierende zusammengesetzte Funktion liefert.

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);
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen