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.
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?
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);
Hilfreichster Kommentar
ich würde es so machen: