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, aufconnect
'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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
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 wieprops
.Ohne das decorator-syntax der Komponente export Aussehen würde
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 istdispatch
- 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, wiestate => ({todosCount: state.todos.length})
und dieHome
Komponente erhalten würde, dietodosCount
propmapDispatchToProps 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 ausmapDispatchToProps
Optionen gut, einige Optionen...
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 🙂