Was ist mapDispatchToProps?

Ich war das Lesen der Dokumentation für die Redux-Bibliothek und es ist dieses Beispiel,

Neben der Lektüre der state -, container-Komponenten können Versand-Aktionen. In ähnlicher Weise können Sie eine Funktion definieren, die aufgerufen mapDispatchToProps() erhält, dass die dispatch () - Methode und gibt callback-Requisiten, die Sie wollen, um zu injizieren, in die Präsentations-Komponente.

Dies eigentlich keinen Sinn macht. Warum brauchen Sie mapDispatchToProps wenn Sie bereits mapStateToProps?

Bieten Sie auch dieses praktische Beispiel:

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

Kann mir bitte jemand erklären, in einer für Laien, was diese Funktion ist und warum es sinnvoll ist?

InformationsquelleAutor Code Whisperer | 2016-09-09

reactjs redux

499

Ich fühle mich wie keine Antworten haben, kristallisiert warum mapDispatchToProps nützlich ist.

Diese kann eigentlich nur beantwortet werden im Kontext der container-component Muster, die fand ich am besten verstanden, indem zuerst Lesen:

https://medium.com/@learnreact/container-components-c0e67432e005#.1a9j3w1jl

dann

http://redux.js.org/docs/basics/UsageWithReact.html

In einer nussschale, Ihre components werden sollen, betrifft ausschließlich die Anzeige von Sachen. Die einzige Ort, wo Sie sollen, um Informationen zu erhalten, ist Ihre Requisiten.

Getrennt von "anzeigen stuff" (Komponenten):
- wie man die Sachen anzeigen zu lassen,
- und wie Sie die Ereignisse verarbeiten.
Das ist das, was containers sind.

Daher ein "gut entwickelt" component im Muster wie folgt Aussehen:
```
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, wie diese Komponente bekommt die info es zeigt von Requisiten (die kamen aus der redux-Shop über mapStateToProps) und es bekommt auch seine action-Funktion aus seiner Requisiten: sendTheAlert().

Dort mapDispatchToProps kommt: in den entsprechenden container
```
//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, wenn Sie sehen können, jetzt, dass es die container [1], der weiß, dass über redux und Versand und Lager und Staats-und ... Zeug.

Den component im pattern FancyAlerter, die das rendering braucht nicht zu wissen, über jede von dem Zeug: es bekommt seine Methode zu nennen, bei onClick von der Taste, über Ihre Requisiten.

... mapDispatchToProps War das nützlich, bedeutet, dass redux bietet, lassen sich die container leicht passieren, dass die Funktion in dem umschlossenen Bauteil auf seine Requisiten.

All dies sieht sehr wie die todo-Beispiel in Google docs, und eine andere Antwort hier, aber ich habe versucht zu wirken in dem Licht das Muster zu betonen warum.

(Hinweis: Sie können nicht mapStateToProps für den gleichen Zweck wie mapDispatchToProps für den Grund, dass Sie nicht haben, Zugang zu dispatch innen mapStateToProp. Also konnten Sie nicht nutzen mapStateToProps zu geben, die gewickelten Komponente eine Methode, die verwendet dispatch.

Ich weiß nicht, warum Sie wählte, um Sie zu brechen in beiden mapping-Funktionen - es könnte aufgeräumter zu haben mapToProps(state, dispatch, props) D. H. eine Funktion, beides zu tun!

[1] Beachten Sie, dass ich mich bewusst explizit benannt container FancyButtonContainer zu markieren, dass es ist ein "Ding" - die Identität (und damit die Existenz!) der container als "ein Ding" ist manchmal verloren in der Kurzform

export default connect(...)

syntax, die angezeigt wird in den meisten Beispielen

Ich würde noch gerne wissen: Was ist die geforderte Funktionalität nicht verarbeitet werden konnte, indem Sie direkt aufrufen zu speichern.Versand aus innerhalb einer Komponente?
Keine. Es geht um gutes design. Wenn Sie gepaart Ihre Komponente zu speichern.Versand, dann, wenn Sie sich entscheiden, Faktor redux, oder es benutzen wollen, einen Ort, der nicht redxu basiert (oder einige andere Sache, die ich kann nicht denken, jetzt) stecken Sie mit einer Menge änderungen. Ihre Frage vergröbert zu "warum tun wir uns die Mühe mit dem 'good design Praxis" - Sie erhalten die gleiche Funktionalität, jedoch geben Sie den code". mapDispatchToProps zur Verfügung steht, damit Sie schreiben können, gut gestaltet, sauber entkoppelten Komponenten.
Was ich wirklich nicht bekommen, hier ist, was Sie ist: ALERT_ACTION ist, dass die action-Funktion oder die type zurückgegeben wird aus dem action-Funktion? :/ also baffed
Streng, ALERT_ACTION hat nichts zu tun mit dieser Frage. Es ist ein gültiges argument zu versenden, und als es passiert, ist das in meinen code, er kommt aus einem "action-generator", die ein Objekt zurückgibt, dass die Versendung verwendet wird, wie beschrieben, redux.js.org/docs/api/Store.html#dispatch. Der wichtigste Punkt hier ist, dass, wie zu nennen, der Versand ist beschrieben in den Behälter und ging in die auf die Komponenten Requisiten. Die Komponente wird nur Funktionen aus Ihren Requisiten, nirgendwo sonst. Der "falsche" Weg, es zu tun, in diesem Muster wäre, um zu übergeben, den Versand an die Komponente und machen das gleiche Aufruf in der Komponente.
Wenn Sie mehrere Maßnahmen betraut, die übergeben werden müssen, um untergeordnete Komponente als Requisiten, eine alternative zum wickeln Sie Sie mit bindActionCreators innen mapDispatchToProps (siehe redux.js.org/docs/api/bindActionCreators.html); eine andere alternative ist, einfach ein Objekt der Handlung Schöpfer zu verbinden(), z.B. connect(mapStateToProps, {actioncreators}),reagieren-redux wird, wickeln Sie Sie mit dispatch() für Sie.

InformationsquelleAutor GreenAsJade
65

Es ist im Grunde eine Kurzform. Also anstatt zu schreiben:
```
this.props.dispatch(toggleTodo(id));
```
Verwenden Sie mapDispatchToProps, wie gezeigt, in Ihrem Beispiel-code, und dann anderswo schreiben:
```
this.props.onTodoClick(id);
```
oder mehr wahrscheinlich, dass in diesem Fall hätten Sie, wie die event-handler:
```
<MyComponent onClick={this.props.onTodoClick} />
```
Gibt es eine hilfreiche video von Dan Abramov auf dieses hier: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

Danke. Ich bin auch gefragt, wie funktioniert der Versand Hinzugefügt werden, um die Requisiten für den ersten Platz?
Wenn Sie nicht Ihre eigenen mapDispatch Funktion, Redux einen Standard. Standard - mapDispatch Funktion nimmt einfach die dispatch Funktion Referenz, und gibt es für Sie als this.props.dispatch.
Die Versandart wird nach unten weitergegeben, indem die Anbieter

InformationsquelleAutor hamstu
45

mapStateToProps() ist ein Dienstprogramm, das hilft, die Komponente aktualisiert ist-Zustand(die aktualisiert wird, von einigen anderen Komponenten),

mapDispatchToProps() ist ein Dienstprogramm, die helfen, Ihre Komponente zu feuern eine action-Ereignis (Versand-Aktion verursachen, ändern des Anwendungsstatus)

InformationsquelleAutor Saisurya Kattamuri
16

mapStateToProps, mapDispatchToProps und connect aus react-redux Bibliothek bietet eine bequeme Möglichkeit zum Zugriff auf Ihre state und dispatch Funktion von Ihrem Geschäft. Also im Grunde die Verbindung ist eine höhere order-Komponente, Sie können auch etwas wie ein wrapper, wenn dies Sinn für Sie machen. Also jedes mal, wenn Ihr state geändert mapStateToProps werden aufgerufen, sich mit Ihrem neuen state und später als Sie props update-Komponente Rendern-Funktion zum Rendern der Komponente im browser. mapDispatchToProps auch speichert Schlüssel-Werte auf die props der Komponente, in der Regel nehmen Sie eine form, eine Funktion. In einer solchen Art und Weise, die Sie auslösen können state ändern, die von der Komponente onClick, onChange Veranstaltungen.

Aus docs:
```
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 vertraut sind mit Reagieren zustandslose Funktionen und Higher-Order Components

Also der Versand ist wie das event grundsätzlich?
Es könnte sein, in Bezug auf Veranstaltung dispatch ist nur Funktion und der einzige Weg, um Ihre Anwendung ändern Zustand. mapStateToProps ist eine Möglichkeit zur Bereitstellung von dispatch - Funktion des store zu Reagieren Komponente. Beachten Sie auch, dass die Verbindung ist nicht Teil der redux in der Tat ist es nur ein Dienstprogramm und Vorlagen reduzieren Bibliothek mit dem Namen reagieren-redux arbeiten mit reagieren und redux. Sie können dasselbe Ergebnis erzielen, ohne reagieren-redux wenn Sie Ihre store von der Wurzel reagieren Komponente zu den Kindern.

InformationsquelleAutor Vlad Filimon
1

mapStateToProps erhält die state und props und ermöglicht das extrahieren von Requisiten aus dem Staat zu übergeben der Komponente.

mapDispatchToProps erhält dispatch und props und ist dafür gedacht, Sie zu binden action Schöpfer zu versenden, so dass, wenn Sie ausführen, die resultierende Funktion die Aktion wird ausgelöst.

Ich finde das nur müssen Sie tun dispatch(actionCreator()) innerhalb Ihrer Komponente, so dass es ein bisschen leichter zu Lesen.

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

Danke aber was ist der Wert der dispatch Methode? Wo kommt es her?
oh. Versand grundsätzlich macht die Aktion start der redux/flux unidirektionalen Fluss. Die anderen Antworten scheinen beantwortet deine Frage besser als diese.
Auch die Versand-Methode stammt aus der Verbesserung durch die <Provider/> selbst. Es hat seine eigene high-order-Komponente Magie, um zu garantieren, dass die Versand ist verfügbar in der Kinder-Komponenten.

InformationsquelleAutor Harry Moreno

Nun angenommen, es ist eine Aktion für redux:

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

Wenn Sie 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);

Als Funktion name sagt mapDispatchToProps(), anzeigen dispatch Aktion Requisiten(unsere Komponente Requisiten)

Also prop onTodoClick ist ein Schlüssel zu mapDispatchToProps Funktion, die Delegierten furthere Versand Aktion addTodo.

Auch, wenn Sie möchten, kürzen Sie den code und manuelle bypass-Umsetzung ist, dann 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())
      }
    }
}

InformationsquelleAutor Meet Zaveri

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.