Was ist mapDispatchToProps?

Ich habe die Dokumentation für die Redux-Bibliothek gelesen und sie enthält das folgende Beispiel:

Zusätzlich zum Lesen des Status können Containerkomponenten Aktionen auslösen. Auf ähnliche Weise können Sie eine aufgerufene Funktion definieren mapDispatchToProps(), die die dispatch()Methode empfängt und Rückruf-Requisiten zurückgibt, die Sie in die Präsentationskomponente einfügen möchten.

Das macht eigentlich keinen Sinn. Warum brauchen Sie, mapDispatchToPropswenn Sie bereits haben mapStateToProps?

Sie bieten auch dieses praktische Codebeispiel:

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

Kann jemand bitte in Laienbegriffen erklären, was diese Funktion ist und warum sie nützlich ist?

Ich habe das Gefühl, dass keine der Antworten herauskristallisiert hat, warum dies mapDispatchToPropsnützlich ist.

Dies kann wirklich nur im Kontext des container-componentMusters beantwortet werden , das ich am besten verstanden habe, indem ich zuerst gelesen habe: Containerkomponenten, dann Verwendung mit Reagieren .

Kurz gesagt, Sie componentssollten sich nur mit dem Anzeigen von Dingen befassen. Der einzige Ort, an dem sie Informationen erhalten sollen, sind ihre Requisiten .

Getrennt von "Anzeigen von Sachen" (Komponenten) ist:

• wie du das Zeug zum Anzeigen bringst,
• und wie Sie mit Ereignissen umgehen.

Dafür containerssind da.

Daher componentsieht ein "gut gestaltetes" Muster so aus:

class FancyAlerter extends Component {
    sendAlert = () => {
        this.props.sendTheAlert()
    }

    render() {
        <div>
          <h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
          <Button onClick={sendAlert}/>
        </div>
     }
}

Sehen Sie, wie diese Komponente die Informationen erhält, die sie von Requisiten anzeigt (die über aus dem Redux-Store kamen mapStateToProps), und wie sie ihre Aktionsfunktion von ihren Requisiten erhält : sendTheAlert().

Hier mapDispatchToPropskommt es ins Spiel: im entsprechendencontainer

// FancyButtonContainer.js

function mapDispatchToProps(dispatch) {
    return({
        sendTheAlert: () => {dispatch(ALERT_ACTION)}
    })
}

function mapStateToProps(state) {
    return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}

export const FancyButtonContainer = connect(
    mapStateToProps, mapDispatchToProps)(
    FancyAlerter
)

Ich frage mich, ob Sie sehen können, jetzt, wo es die container 1 ist , die über Redux und Versand und Lagerung und Zustand und ... Zeug Bescheid weiß.

Das componentin dem Muster, FancyAlerterdas das Rendern ausführt, muss nichts davon wissen: Es erhält seine Methode onClick, um über seine Requisiten auf die Schaltfläche zuzugreifen.

Und ... mapDispatchToPropswar das nützliche Mittel, das Redux bietet, damit der Container diese Funktion problemlos an die verpackte Komponente seiner Requisiten weitergeben kann.

All dies sieht dem ToDo-Beispiel in den Dokumenten und einer weiteren Antwort hier sehr ähnlich, aber ich habe versucht, es im Lichte des Musters zu werfen, um zu betonen, warum .

(Hinweis: Sie können nicht mapStateToPropsfür den gleichen Zweck wie mapDispatchToPropsdie wesentlichen Grund dafür , dass Sie keinen Zugriff auf dispatchinnen , mapStateToPropdamit Sie nicht benutzen können. mapStateToPropsDer umwickelten Komponente zu geben , ein Verfahren , dass Verwendungen dispatch.

Ich weiß nicht, warum sie es in zwei Mapping-Funktionen unterteilt haben - es wäre vielleicht ordentlicher gewesen, wenn mapToProps(state, dispatch, props) IE eine Funktion für beide Funktionen hätte!

1 Beachten Sie, dass ich den Container absichtlich explizit benannt habe FancyButtonContainer, um hervorzuheben, dass es sich um ein "Ding" handelt - die Identität (und damit die Existenz!) Des Containers als "Ding" geht manchmal in der Kurzform verloren

export default connect(...) ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

Syntax, die in den meisten Beispielen gezeigt wird

Es ist im Grunde eine Abkürzung. Also anstatt schreiben zu müssen:

this.props.dispatch(toggleTodo(id));

Sie würden mapDispatchToProps wie in Ihrem Beispielcode gezeigt verwenden und dann an anderer Stelle schreiben:

this.props.onTodoClick(id);

oder wahrscheinlicher in diesem Fall hätten Sie das als Ereignishandler:

<MyComponent onClick={this.props.onTodoClick} />

Hier gibt es ein hilfreiches Video von Dan Abramov: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

mapStateToProps()ist ein Dienstprogramm, mit dem Ihre Komponente den aktualisierten Status erhält (der von einigen anderen Komponenten aktualisiert wird). Es
mapDispatchToProps()ist ein Dienstprogramm, mit dem Ihre Komponente ein Aktionsereignis auslösen kann (Auslösen einer Aktion, die zu einer Änderung des Anwendungsstatus führen kann).

mapStateToProps, mapDispatchToPropsUnd connectvon react-reduxBibliothek bietet eine bequeme Möglichkeit für den Zugriff auf Ihre stateund dispatchFunktion Ihres Shops. Im Grunde genommen ist connect eine Komponente höherer Ordnung. Sie können auch als Wrapper denken, wenn dies für Sie sinnvoll ist. Jedes Mal, wenn Ihre stateÄnderung geändert mapStateToPropswird, wird sie mit Ihrer neuen aufgerufen. stateAnschließend wird beim propsAktualisieren der Komponente die Renderfunktion ausgeführt, um Ihre Komponente im Browser zu rendern. mapDispatchToPropsspeichert auch Schlüsselwerte auf der propsIhrer Komponente, normalerweise haben sie die Form einer Funktion. Auf diese Weise können Sie stateÄnderungen an Ihrer Komponente auslösen onClick.onChange Ereignissen .

Aus Dokumenten:

const TodoListComponent = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

const TodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList) 

Stellen Sie außerdem sicher, dass Sie mit den Funktionen Statuslos reagieren und Komponenten höherer Ordnung vertraut sind

mapStateToPropsempfängt das stateund propsund ermöglicht es Ihnen, Requisiten aus dem Status zu extrahieren, um sie an die Komponente zu übergeben.

mapDispatchToPropsempfängt dispatchund propsund ist dazu gedacht, dass Sie Aktionsersteller an den Versand binden. Wenn Sie also die resultierende Funktion ausführen, wird die Aktion gesendet.

Ich finde, dies erspart Ihnen nur die Notwendigkeit, dispatch(actionCreator())innerhalb Ihrer Komponente zu arbeiten, wodurch es ein bisschen einfacher zu lesen ist.

https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments

Angenommen, es gibt eine Aktion für Redux als:

export function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

Wenn Sie es importieren,

import {addTodo} from './actions';

class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.onTodoClick(); // This prop acts as key to callback prop for mapDispatchToProps
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

const mapDispatchToProps = dispatch => {
    return {
      onTodoClick: () => { // handles onTodoClick prop's call here
        dispatch(addTodo())
      }
    }
}

export default connect(
    null,
    mapDispatchToProps
)(Greeting);

Wie der Funktionsname sagt mapDispatchToProps(), Kartedispatch Aktion den Requisiten zu (den Requisiten unserer Komponente).

Prop onTodoClickist also ein mapDispatchToPropsFunktionsschlüssel, der die Weiterleitung von Versandaktionen delegiert addTodo.

Auch wenn Sie den Code kürzen und die manuelle Implementierung umgehen möchten, können Sie dies tun:

import {addTodo} from './actions';
class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.addTodo();
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

export default connect(
    null,
    {addTodo}
)(Greeting);

Was genau bedeutet

const mapDispatchToProps = dispatch => {
    return {
      addTodo: () => { 
        dispatch(addTodo())
      }
    }
}