React Redux Store - Zugriff von allen Komponenten

Question

Ich bin relativ neu in React und Redux nachdem ich viel Zeit in der .net mvc und knockoutjs Welt verbracht habe. Was ich nicht verstehen kann, ist, wie der Speicher verwendet wird und wie Requisiten zwischen Eltern- und Kindkomponenten weitergegeben werden.

Meine erste Frage: Wenn ein Array von Werten über Requisiten von Eltern zu Kinder-Komponenten gesendet wird, machen diese Komponenten eine tiefe Kopie und erstellen ihre eigene Version dieses Arrays? Wenn wir eine ziemlich große Reihe von Werten haben, auf die mehrere Kinder Zugriff haben sollen, und wir senden sie als Props, erzeugen wir unnötigerweise zusätzliche Daten oder verweisen sie einfach nur auf das gleiche Array?

Ich bin nicht sicher, genau, wie der Laden verwendet wird, aber könnte es verwendet werden, um das obige Szenario zu helfen? Wenn wir einige Werte wie ein größeres Array haben, auf das wir von mehreren untergeordneten Komponenten zugreifen möchten, könnten sie sie aus diesem global zugänglichen Speicher ziehen?

Ich würde mich freuen, wenn jemand mir helfen könnte, meinen Kopf um diese Konzepte zu wickeln. In meinem Szenario, an dem ich gerade arbeite, haben wir eine Tabelle mit 30 Schülern, von denen jeder eine Reihe von Daten erhält, um einige Zeilen zu füllen. Was ich allerdings befürchte, ist, dass wir jedem Schüler eine große Menge an Daten geben, die er nicht benötigt, wenn er vom Elternteil oder diesem globalen Laden ziehen könnte.

<StudentTable 
     onSelectAllStudents={this.props.handleSelectAllStudents} 
     handleLoadStudentResponses={this.props.handleLoadStudentResponses} 
     structures={this.props.structures} 
     lessons={this.props.lessons} 
     activities={this.props.activities} 
     students={this.props.students} /> 

Sie erstellen eine Tabelle, in der jede Zeile ein Student ist. Die Tabelle enthält eine große Menge an Daten (was ein ganz anderes Problem ist), aber was wir im Grunde tun, ist für jeden Schüler, den wir zeigen, ob sie eine bestimmte Aktivität abgeschlossen haben oder nicht. Wie Sie auf dem Screenshot sehen können, bauen sie einen ziemlich komplexen Tisch auf. In der StudentTabelle durchlaufen sie Schüler und führen eine Student-Komponente für jede Zeile aus, die in der Liste der Aktivitäten gesendet wird, so dass sie in der Tabelle in einer Zelle basierend darauf, ob die Aktivität veröffentlicht ist, farbig dargestellt werden können. Meine Hauptangst war, dass mit jeder Student-Komponente, die die Liste der Aktivitäten erhielt, eine Menge Daten dem Speicher hinzugefügt wurde, im Gegensatz zu den zahlreichen Student-Komponenten, die nur auf ein Eltern-Array verweisen.

Answer 1

Basierend auf der Syntax ich gesehen habe, erhalten die Kinder einen Zeiger. Kein neues Objekt. In Bezug auf Ihre Frage, wie Sie 30 Schülern das gesamte Array geben können, nähern Sie sich nicht den Daten, die korrekt weitergegeben werden. Zeig uns ein Code-Snippet und ich kann mehr kommentieren.

Auch redux ist nicht hilfreich. Es kann verwendet werden, aber es ist Overkill und fügt unnötige Komplexität hinzu. Komponenten mit einer Kind-Eltern-Beziehung können sehr einfach mit normalem React-Prop-Passing behandelt werden. Redux ist die Option, wenn die Komponenten keine direkte Beziehung haben.

edit: Beim Verweisen auf Elemente in einem Objekt werden Grundelemente kopiert und Objekte werden ausgerichtet.

const obj = {arrayObject: [], primitiveBoolean: true} 
const primitive = obj.primitiveBoolean 
const array = obj.arrayObject 
primitive = false 
console.log(obj.primitiveBoolean); //still true 
array.push(10) 
console.log(obj.arrayObject); // [10] push changed object's array