mapDispatchToProps
ist ein optionaler Parameter in der connect()
-Funktion der React Redux-Bibliothek. Er ermöglicht es Ihnen zu definieren, wie Action Creators auf die Props einer Komponente gemappt werden. Mit anderen Worten, mapDispatchToProps
legt fest, wie eine Komponente Zustandsänderungen im Redux Store auslösen kann.
mapDispatchToProps
kann entweder ein Objekt oder eine Funktion sein.
mapDispatchToProps
als Objekt:
Jedes Attribut des Objekts repräsentiert einen Action Creator. React Redux verwendet automatisch bindActionCreators()
, um jeden Action Creator mit der dispatch()
-Funktion zu verknüpfen und diese dann als Props an die Komponente zu übergeben. Beispiel:
const mapDispatchToProps = {
increment: () => ({ type: 'INCREMENT' }),
decrement: () => ({ type: 'DECREMENT' })
};
In diesem Beispiel erhält die Komponente zwei Props: increment
und decrement
. Beim Aufruf von this.props.increment()
wird die Action { type: 'INCREMENT' }
an den Store dispatched.
mapDispatchToProps
als Funktion:
Diese Funktion empfängt dispatch
als Parameter und gibt ein Objekt zurück. Dieses Objekt mappt die Props der Komponente auf Funktionen, die Actions dispatchen. Dies ermöglicht Ihnen, das Dispatchen von Actions anzupassen und bei Bedarf zusätzliche Parameter zu übergeben. Beispiel:
const mapDispatchToProps = (dispatch) => {
return {
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT' }),
incrementByAmount: (amount) => dispatch({ type: 'INCREMENT_BY_AMOUNT', payload: amount })
};
};
Auf diese Weise haben Sie die volle Kontrolle über das Dispatchen von Actions. Beispielsweise ermöglicht incrementByAmount
das Dispatchen einer Action mit einem Payload (zusätzlichem Wert).
mapDispatchToProps
vereinfacht die Verbindung von Komponenten mit dem Redux Store. Es ermöglicht Ihnen, übersichtlicheren und leichter testbaren Code zu schreiben, indem die Action-Logik von der Komponente getrennt wird. Durch die Verwendung von mapDispatchToProps
muss sich Ihre Komponente nur um die Darstellung von Daten und das Aufrufen der bereitgestellten Props kümmern, um den Zustand zu ändern, ohne die Details des Action Dispatchings kennen zu müssen.
Wenn mapDispatchToProps
nicht verwendet wird, erhält die Komponente dispatch
als Prop. Die Verwendung von mapDispatchToProps
verbessert jedoch die Lesbarkeit und Wartbarkeit des Codes, insbesondere wenn Sie viele Action Creators haben. Außerdem können Sie die Vorteile von bindActionCreators
zur Leistungsoptimierung nutzen.