React-Redux mapStateToProps vs Eltern-Requisiten übergeben

Question

Dies mag als eine naive Frage, aber ich bin neu zu reagieren-Redux und ich lerne, wie ich gehe.

Kontext: Angesichts, dass ich eine Reaktion-Redux-Anwendung habe. In meiner Top-Level- Komponente Ich habe dies an der Unterseite:

function mapStateToProps({ auth }) { 
    return { auth }; 
} 

export default connect(mapStateToProps)(newComponent); 

Der 'Auth' Teil kommt aus meiner Minderer index.js Datei:

import { combineReducers } from "redux"; 
import authReducer from "./authReducer"; 

export default combineReducers({ 
    auth: authReducer 
}); 

So, jetzt diese Komponente hat Zugriff auf alle Daten, die mit Auth geliefert werden, die in meiner Anwendung alle erforderlichen Benutzerinformationen enthält.

Als meine Bewerbung wurde größer ich wurde mir klar, die Daten aus dem authReducer in anderen Komponenten benötigt, die waren 1 oder 2 Schichten nach unten von der Top-Level-Komponente

Meine Frage (n) sind: Ist es besser, Übung, um die Top-Level-Komponente mit dem Auth Reducer zu verbinden und die notwendigen Informationen an untergeordnete Komponenten weiterzugeben? Was wäre, wenn ein Kind, das 100 Schichten lang ist, Informationen vom authReducer benötigt, würden wir es Schicht um Schicht weiterleiten?

ODER würden wir nur den authReducer wie ich oben zu jeder Komponente verbinden, die es braucht? Wäre das immer wieder teuer?

Answer 1

Die Dokumentation enthält Best Practices zu diesem Thema: link. Relevante Teil:

Das aktuell vorgeschlagen Best Practice ist Ihre Komponenten als „Präsentations“ oder „Container“ Komponenten zu kategorisieren und extrahieren eine angeschlossene Container-Komponente überall dort, wo es Sinn macht:

„betonend, ein Behälter Komponente an der Spitze "in Redux Beispiele war ein Fehler. Nimm das nicht als Maxime. Versuchen Sie, Ihre Präsentation Komponenten getrennt zu halten. Erstellen Sie Container-Komponenten, indem Sie sie verbinden, wenn es bequem ist. Wann immer Sie das Gefühl haben, Code in Elternkomponenten zu duplizieren, um Daten für gleiche Arten von Kindern bereitzustellen, geben Sie ein, um einen Container zu extrahieren. Im Allgemeinen, sobald Sie denken, dass ein Elternteil zu viel über "persönliche" Daten oder Handlungen seiner Kinder weiß, Zeit, einen Behälter zu extrahieren.

In der Tat haben Benchmarks gezeigt, dass mehr verbundene Komponenten im Allgemeinen zu einer besseren Leistung führen als weniger verbundene Komponenten.

Im Allgemeinen versuchen Sie, ein Gleichgewicht zwischen verständlichen Datenfluss und Verantwortungsbereiche mit Ihren Komponenten zu finden.