React, Redux sind unabhängige Bibliotheken.
React bietet Ihnen ein Framework zum Erstellen von HTML-Dokumenten. Komponenten repräsentieren in gewisser Weise einen bestimmten Teil des Dokuments. Mit einer Komponente verknüpfte Methoden können dann den ganz bestimmten Teil des Dokuments bearbeiten.
Redux ist ein Framework, das eine bestimmte Philosophie zum Speichern und Verwalten von Daten in JS-Umgebungen vorschreibt. Es handelt sich um ein einziges großes JS-Objekt mit bestimmten definierten Methoden. Der beste Anwendungsfall ist die Statusverwaltung einer Web-App.
Da React vorschreibt, dass alle Daten von der Wurzel zu den Blättern fließen sollen, wird es mühsam, alle Requisiten zu pflegen, Requisiten in Komponenten zu definieren und dann Requisiten an bestimmte Requisiten an Kinder weiterzugeben. Es macht auch den gesamten Anwendungsstatus anfällig.
React Redux bietet eine saubere Lösung, bei der Sie direkt mit dem Redux-Store verbunden werden, indem Sie die angeschlossene Komponente einfach um eine andere React-Komponente (Ihre Container) wickeln . Da Sie in Ihrer Implementierung bereits definiert haben, welchen Teil des gesamten Anwendungsstatus Sie benötigen. So connectnimmt , dass die Daten aus dem Speicher heraus und übergibt sie als Requisiten an die Komponente es Einwickeln selbst arround.
Betrachten Sie dieses einfache Beispiel:
class Person extends Component {
constructor(props){
this.name = this.props.name;
this.type = this.props.type;
}
render() {
return <p> My name is {this.name}. I am a doctor { this.type } </p>
}
}
const connect = InnerComponent => {
class A extends Component{
render() {
return <InnerComponent {...this.props} type="Doctor"/>
}
}
A.displayName = `Connect(${InnerComponent.displayName})`
return A
}
connectFunktion übergibt eine Requisite type.
Auf diese Weise fungiert eine Verbindung als Container für die Person-Komponente.
