Sonntag, Dezember 15, 2019

Was ist die Verwendung von @connect Dekorateur in reagieren-redux

Lerne ich Reagieren und nach ein paar tutorials, stieß ich auf diesen code:

import React                  from 'react';
import TodosView              from 'components/TodosView';
import TodosForm              from 'components/TodosForm';
import { bindActionCreators } from 'redux';
import * as TodoActions       from 'actions/TodoActions';
import { connect }            from 'react-redux';

@connect(state => ({ todos: state.todos }))

export default class Home extends React.Component {
  render() {
    const { todos, dispatch } = this.props;

    return (
      <div id="todo-list">
        <TodosView todos={todos} 
          {...bindActionCreators(TodoActions, dispatch)} />

        <TodosForm
          {...bindActionCreators(TodoActions, dispatch)} />
      </div>
    );
  }
}

Dies ist eine todo-Anwendung, und dies ist die Hauptseite geladen, 2 weitere kleine components. Ich habe fast alles verstanden, aber ich konnte Sie nicht bekommen einige Dinge:

  • Was bedeutet connect tun? Ich weiß, Sie haben zu pass 4 params(konnte ich nicht genau das bekommen, was sind diese 4 Variablen, obwohl).
  • Wie ist die Umsetzung der @connect decorator, wie der code Aussehen wird nach transpiling?

Vielen Dank im Voraus 🙂

  • Redux und reagieren-redux Dokumentationen sind ziemlich komplett auf dieses Thema. Auf was connect bedeutet für Sie : redux.js.org/docs/basics/UsageWithReact.html, auf connect’s API und was sind die vier Argumente: github.com/reactjs/react-redux/blob/master/docs/…
  • Nun, ich habe zu wissen, über die 4 Argumente, die von den gleichen link, aber ich konnte es nicht verstehen, richtig von dort, deshalb habe ich darum gebeten hier eine Frage 🙂 🙂
  • Ok, ich werde eine schnelle Antwort, aber ich bezweifle, dass ich tun kann, besser als die Dokumentation! 🙂
  • Ich möchte hinzufügen, dass die offizielle Dokumentation nie verwendet, Dekorateure überall, denn es ist eine instabile Funktion und kann zu einem späteren Zeitpunkt ändern. Nicht verwenden, es sei denn, Sie sind OK mit ihm brechen irgendwann.
InformationsquelleAutor Bharat Soni | 2016-04-11

1 Kommentar

  1. 31

    Redux hält den Zustand der Anwendung in einem einzelnen Objekt zu speichern. connect ermöglicht die Verbindung Ihrer Komponenten Reagieren, um Ihre store-Zustand zu überliefern, um Sie Ihren Shop Zustand wie props.

    Ohne das decorator-syntax der Komponente export Aussehen würde

    export default connect(state => ({todos: state.todos}))(Home);

    Was es tut, ist, dass es dauert Ihre Komponente (hier Home) und gibt eine neue Komponente, die ordnungsgemäß mit Ihrem store.

    Verbunden bedeutet hier : Sie erhalten das Geschäft der Staat als props, und wenn sich dieser Zustand wird aktualisiert, diese neue angeschlossene Komponente erhält die neuen Requisiten. Verbunden auch bedeuten, dass Sie Zugriff auf den store ist dispatch – Funktion, die Ihnen erlaubt zu mutieren der Filiale Zustand.

    Den vier Argumente sind :

    • mapStateToProps Sie wahrscheinlich nicht wollen, um zu injizieren, alle Ihre store-Zustand in allen Ihren angeschlossenen Komponenten. Mit dieser Funktion können Sie festlegen, welcher Staat Scheiben, die Sie interessiert, oder vergehen, wie props neue Daten abgeleitet, die aus dem store state. Sie konnte etwas tun, wie state => ({todosCount: state.todos.length}) und die Home Komponente erhalten würde, die todosCount prop

    • mapDispatchToProps tut das gleiche für die dispatch-Funktion. Sie konnte etwas tun, wie dispatch => ({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})

    • mergeProps können Sie eine benutzerdefinierte Funktion definieren zu verschmelzen, die Requisiten, die Ihre Komponente erhält, die aus mapStateToProps und diejenigen, die kommen aus mapDispatchToProps

    • Optionen gut, einige Optionen…

    • die Raumausstatter-syntax ist erklärt : er schreibt deine Klasse Erklärung als connect(connectOptions)(MyComponent), das ist alles. connect gibt eine Funktion, eine Komponente als Parameter und gibt eine neue Komponente. Für den rest, es ist kein copy-paste, aber trotzdem, sorry wenn es nicht hilft, Sie mehr als die docs, ich habe mein bestes 🙂
    • Vielen Dank für diese geniale Erklärung über die Reagieren mit Redux, das ist die beste Erklärung bisher.

Kostenlose Online-Tests

Letzte Fragen

Tun ItemView löst Blase?

Ich habe eine CompositeView für eine Tabelle. Ich habe Trigger-set in der Kind-ItemView für jede Zeile... var TableRow = Marionette.ItemView.extend({ tagName:...

Wie kann ich untersuchen, WCF was 400 bad request über GET?

Die folgenden WCF-endpoint funktioniert gut mit dem WCF test client: AssetList ListFlaggedAssets(short processCode, string platform, string endpoint = "null", string portalId = "null", int...

Bei der Verwendung von UUIDs, sollte ich auch mit AUTO_INCREMENT?

Wir bauen eine neue web-app, die eine offline-iPad - /Android-app-version auf einer Reihe von lokalen Geräten, die Einsätze mit neuen Daten. Als solche benötigen...

Actionscript-Objekt, das verschiedene Eigenschaften

Wie kann ich die Anzahl der Eigenschaften in einer generischen Actionscript-Objekt? (Wie die Array-Länge) InformationsquelleAutor Fragsworth | 2011-01-15

Wie plot mehrere Graphen und nutzen Sie die Navigations-Taste im [matplotlib]

Die neueste version von matplotlib erstellt automatisch Navigations-buttons unter den graph. Aber die Beispiele, die ich finden alles im Internet zeigen, wie erstellen Sie...