`mapDispatchToProps` in React Redux verstehen

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.