反応UIコンポーネントに正規化されたデータを表示

Question

「このような正規化されたオブジェクトがレビュックスストアにあるとしましょう。

{ 
entities: { 
    plans: { 
    1: {title: 'A', exercises: [1, 2, 3]}, 
    2: {title: 'B', exercises: [5, 6]} 
    }, 
    exercises: { 
    1: {title: 'exe1'}, 
    2: {title: 'exe2'}, 
    3: {title: 'exe3'} 
    5: {title: 'exe5'} 
    6: {title: 'exe6'} 
} 
}, 
currentPlans: [1, 2] 
} 

各プランの練習の詳細について、UIコンポーネントに表示したいと考えています。何かのようなもの。

plan 1 
title A 
    exercises 
    exercise 1 
    title: 'exe1' 
    exercise 2 
    title: 'exe2' 
    .......... 
plan 2 
title B 
exercises 
    exercise 5 
    title: 'exe5' 
    ........ 

もう一度非正規化する必要がありますか？どのようにデータを変換するのですか？私はconnectStateToPropsを使用して

plans: some mapping function that will create nested plans->exercise array 

などの方法を実行しますか？

Answer 1

うわー、表示する前に非正規化する必要があります。たとえば、非正規化されたユーザーIDのリストとして格納されているアクティブなユーザーのリストがある場合は、これらをマップし、フェッチごとに状態ツリーの各オブジェクトをフェッチする必要があります。

はい、これはおそらくmapStateToPropsで行います。

（state）=>データの関数を使用して、必要なものをすべて読み込み、コンポーネントに提供される最終的な構造を作成することをお勧めします。

https://github.com/reactjs/reselectを使用するのが一般的です。これは、パフォーマンス向上のためセレクタの出力をメモするためです。レピュクスのほとんどのものと同じように、それは魔法ではなく、あなたは絶対にそれなしで行くことができます。特に今のところフレームワークをちょうど弄っているならば。