正規化された応答を処理する最も良い方法は何ですか？

Question

私はnormalizrを使用して応答を正規化しています。

私の問題は、正規化された応答の管理方法がわかりません。

{ 
    result:[] 
    entities: { 
    words: { 
     //... 
     1: { 
     definitions: [1, 2, 3] 
     } 
     // other word objects...  
    }, 
    definitions: { 

     1: 'blah blah' 
     2: 'blah blah' 
     3: 'blah blah' 
     // definition objects 
    } 
    } 
} 

私は定義と反応するコンポーネントに単語を渡したいです。どのように入れ子になった定義を持つ単語を取得し、それを自分のコンポーネントにレンダリングすることができますか？

Answer 1

webpackbin DEMO

あなたの状態は、この

entities: { 
    words: { 
     //... 
     1: { 
      id:1, 
      text:"Word", 
      definitions: [1, 2, 3] 
     }, 
     // other word objects... 
    }, 
    definitions: { 
     1: {id:1, text:'blah blah'}, 
     2: {id:2, text:'blah blah'}, 
     3: {id:3, text:'blah blah'}, 
     // definition objects 
    } 
}, 
wordsById : [1,4,7,8,22] 

ようになりますと仮定して、その後...ワードリストは、次のようになります。状態からの単語のスライスIDは、リスト

const WordList = ({ids}) => <div>{ids.map(id => <Word id={id} key={id}/>)}</div>; 

export default connect(state =>({ ids:state.wordsById }))(WordList); 

とWordコンポーネントをレンダリングするために：、小道具からIDによって状態から特定の単語を取得する地図

const Word = ({word, definitions}) =>(
    <div className="word-block"> 
     <span>{word.text}</span> 
     <DefinitionsList definitions={definitions}/> 
    </div> 
) 

const mapStateToProps = (state, props) =>{ 
    const word = state.entities.words[props.id]; 
    const { definitions:ids } = word 
    return { 
     word, 
     definitions:ids.map(id => state.entities.definitions[id]) 
    }; 
} 

export default connect(mapStateToProps, actions)(Word); 

とDefinitionsList

を通して定義のリストを計算します

const DefinitionsList = ({definitions})=> (
    <div className="definitions"> 
     {definitions.map(def =><div key={def.id}>{def.text}</div>)} 
    </div> 
); 

機能性成分が短く使用されました。