React Reduxコンポーネントを追加する

Question

私は、作業しているプロジェクトがあります。これは、HTMLページビルダーです。ユーザーは、メニューからあらかじめ設計されたHTMLページセクション（ヘッダー、スライダー、コンテンツブロック、フッターなど）の一覧から選択し、キャンバスにドロップしてWebページを作成することができます。最終的な結果は、静的なWebサイトを含むダウンロード可能なzipファイルです。

私のアプリケーションのレイアウトは、これまでのところ、次のようになります

私はパート1,2 & 3カバーを持っています。スライド・アウト・ドロワの第4部にはHTMLセクションが含まれています。クリックすると、対応するコンポーネントをページのメイン・エリアに追加します。このプロセスは、Webページが構築されるまで繰り返されます。各コンポーネントを編集し、最終的にページとして保存することができます。

私がアドバイスを求めているのは、React/Reduxを使用して、mainエリアonclickに完全なコンポーネントを追加する方法です。

コンポーネントを参照するアクション/レデューサーをディスパッチすると仮定しますが、メイン領域に追加されたコンポーネントを実際に追加して追跡するにはどうすればよいですか？ jQueryを使用すると、これは単純なjQuery​​になりますが、React/Reduxではわかりません。リアクタを使って使うことはできますか？

誰かが正しい方向に向けるのを助けることができますか？さらに読むなど

事前に感謝します。

Answer 1

ゆるく、各コンポーネントにいくつかのタイプのIDをマップし、次にそのIDをmainArea = [id1, id6, id12]などのようなものにストアすることができます。<MainArea />コンポーネントは、小道具を反復して、コンポーネント。

編集：コンポーネントの地図を活用する方法を明確にします。

これはおおよそお探しのものです。上記のIDが私たちのコンポーネントだとしましょう。どこか私たちのコードベースでは、我々は、コンポーネントにこれらのIDのマッピングを持っているでしょう：

const Component1 = React.createClass(...) 
const Component6 = React.createClass(...) 
const Component12 = React.createClass(...) 

const componentMap = { 
    id1: Component1, 
    id6: Component6, 
    id12: Component12, 
} 

そして、それはそれは上記のマッピングから対応するコンポーネントを引き出して、それをレンダリングするでしょうが格納されているIDSを通して、あなたの<MainArea />部品を反復します。