React Redux Store - 全コンポーネントでアクセス

Question

.net mvcとknockoutjsの世界で多くの時間を費やした後は、ReactとReduxには比較的新しいです。理解がうまくいかないのは、ストアがどのように使用され、親コンポーネントと子コンポーネントの間でどのように小道具が引き渡されるかです。

私の最初の質問：値の配列が親から子のコンポーネントに小道具を介して送られる場合、これらのコンポーネントはディープコピーを行い、この配列の独自のバージョンを作成しますか？複数の子にアクセスさせたくない値の配列が大量にあり、それを小道具として送信すると、不必要に余分なデータを作成するのか、単に同じ配列を参照するだけなのでしょうか？

店舗の使用方法は正確にはわかりませんが、上記のシナリオを支援するために使用できますか？複数のコンポーネントの子要素からアクセスしたい、より大きい配列のような値がある場合、それらをグローバルにアクセス可能なこのストアから取得できますか？

誰かが私の頭をこれらのコンセプトの周りで包んでくれるのを助けることができたら、私は感謝します。私のシナリオでは、私たちはそれぞれ30人の学生のテーブルを持っています。それぞれのテーブルには、いくつかの行を記入するのに役立つ一連のデータが送られます。私たちがやっているのは、各生徒に親やグローバルストアから引き出すことができれば、大量のデータを必要としないことです。

<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} /> 

それぞれの行が学生であるテーブルを作成しています。テーブルには大量のデータが含まれています（これは他の問題です）。基本的には、個々の学生が特定のアクティビティを完了したかどうかを表示しています。あなたがスクリーンショットで見ることができるように、彼らはかなり複雑なテーブルを構築します。スチューデントテーブルでは、生徒をループし、アクティビティが公開されているかどうかに基づいてセル内で色付けできるように、アクティビティのリストで送信される各行のStudentコンポーネントを作成します。私の主な懸念は、各生徒のコンポーネントがアクティビティのリストを取得するにつれて、親配列を参照する多数の生徒のコンポーネントとは対照的に、大量のデータをメモリに追加していたことでした。

Answer 1

私が見てきた構文に基づいて、子どもたちはポインタを受け取ります。新しいオブジェクトではありません。 30人の学生に配列全体を渡すことについてのあなたの質問に関して、あなたは正しくデータに近づいていません。コードスニペットを表示すると、私はさらにコメントすることができます。

また、還元は役に立たない。それは使用することができますが、それは過労であり、不必要な複雑さを追加します。子 - 親の関係を持つコンポーネントは、通常のReact propを渡すことで非常に簡単に処理できます。コンポーネントが直接の関係を持たない場合、Reduxは選択肢です。

編集：オブジェクト内の要素を参照するとき、プリミティブがコピーされ、オブジェクトがポイントされます。

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