は、動的要素

Question

と反応＆Reduxの私は現在、これに似ているリアクト/ Reduxので分析ダッシュボードを開発しています：ダッシュボードの

ユーザーがカスタマイズするためにタイルを追加および削除することができますタッシュの構成はAPIに格納され、取得されます。

タイルの設定のためのデータの記憶は、グローバルな状態モデルとよく合うようだ：ロードオン

1. 、ダッシュボードコンポーネントは「loadTiles」アクション
2. を派遣アクションがフェッチデータをタイル化してタイルリデューサに渡します
3. そこからストア/グローバル状態になります。 mapStateToPropsで
4. 、データはstate.app.tiles

からアクセスされる各タイルのデータを取り込むときしかし、問題が生じます。タイルの数とデータの性質は動的なので、減速機を前もって設定することはできません。

これは、（純粋な/従来のcomponentWillMountなどを使用したReactのように）各自の状態を管理することで解決できますが、これはプロジェクトの残りの部分でレイアウトされたアーキテクチャプリンシパルの一部に違反しますグローバル状態で管理される）。

私がデータを格納することができる唯一の方法は、グローバルな状態です。さまざまなデータセットの動的配列を持つアナリティクスを持つことです。

ここではローカルコンポーネントの状態が最も良いですか？またはこれは完全にグローバルな状態で行うことができますか？動的に指定されたクエリを使用するReduxの例はありますか？

Answer 1

あなたができることの1つは、各タイルのIDの使用です。だからあなたの状態は、次のようになります。

{ 
    tiles: { 
    tile1: {}, 
    … 
    tile100: {} 
    } 
} 

よりは、あなたがそうのような独自の小道具を使用することができますmapStateToProps()機能に：

function mapStateToProps(state, ownProps) { 
    //test if it exists 
    if (state.tiles[ownProps.id]) { 
    return { tileData: state.tiles[ownProps.id] } 
    } 
    else 
    { 
    return { tileData: <default state> } 
    } 
} 

重要な部分は、各タイルの一意のIDを引き渡すことです、それらが作成されるとき、一つの方法は、次のようになります記載されているようにuuid()方法を作成することができる

<Tile id={uuid()} other="stuff" /> 

here

高次のコンポーネント（私自身の受け入れられない答え）を使ってより複雑なソリューションを見たい場合は、これまで同様の問題が発生しました。hereです。全体的に、上記はIMHOの最も単純な解法です。