Wie ist die Beziehung zwischen <Provider> und connect() in React-Redux?

Question

Ich bin neu zu Redux und ich versuche, die Beziehung zwischen <Provider> und connect() herauszufinden.

Wie ich es verstehe, connectverbindet Ihre Komponente an den Laden. Aber nirgends in den Funktionsargumenten sagen Sie connect, wo genau das Geschäft ist!

Wenn ich mich nicht irre, wird das Geschäft automatisch connect() von der <Provider> zur Verfügung gestellt. Dies erscheint mir sehr kontraintuitiv, weil die entire point von Redux transparent sein soll.

Also meine Frage ist, wie geht <Provider> den Laden zu connect() ohne Verwendung einer Art globaler Variable übergeben? Durchläuft es den gesamten Baum, sucht nach connect ed Komponenten und injiziert sich dann selbst? Ist das nicht ineffizient? Und wenn ja, wie würde ich zwei verschiedene Speicher innerhalb desselben Komponentenbaums verwenden?

Zweitens angenommen, ich möchte <Provider> nicht verwenden, wie kann ich connect() ohne es verwenden? Wie kann ich einen Speicher explizit an jede verbundene Komponente übergeben?

Answer 1

<Provider> und connect sind Teil des react-redux Moduls. Sie arbeiten zusammen, du solltest nicht eins ohne das andere benutzen. Sie können verwenden redux allein ohne react-redux, aber Sie werden wahrscheinlich am Ende einige oder alle der Funktionen neu erstellen, die react-redux bietet.

react-redux funktioniert mit der React context. Kontext ist wie eine verborgene Ebene zum Übergeben von Variablen, die von mehreren Komponenten gemeinsam genutzt werden, ohne sie explizit zu übergeben. Um den Kontext zu verwenden, müssen Sie den Kontext irgendwo einstellen, aber auch jede Komponente, die etwas von context verwenden möchte, muss die Variable erhalten. In react-redux<Provider> im Wesentlichen speichert das Geschäft auf context und connect bietet eine Möglichkeit, das Geschäft von der context zu bekommen.

Wenn Sie noch nicht, I recommend these videos für den Einstieg mit Redux und react-redux vom Schöpfer von Redux.

Answer 2

Die redux docs sind ziemlich groß und haben einige Informationen über Provider und connect()

Die Option, die wir empfehlen, ist eine spezielle Redux Komponente <Provider> genannt Reagieren zu verwenden, um auf magische Weise das Geschäft zur Verfügung zu allen Container Komponenten zu machen in die Anwendung, ohne sie explizit zu übergeben. Sie müssen es nur einmal verwenden, wenn Sie die Root-Komponente

Im Wesentlichen machen es nutzt die Verwendung von context, die von React ist. Gemäß der Dokumentation können Sie Daten durch den Komponentenbaum übertragen, ohne die Requisiten manuell auf jeder Ebene zu übergeben.

Es gibt keinen Grund, warum Sie den Speicher nicht explizit übergeben können. Die Idee hier ist, dass es nur die Dinge einfacher macht.