Was ist der beste Weg, um mit einer normalisierten Antwort umzugehen?

Question

Ich benutze normalizr, um eine Antwort zu normalisieren.

Mein Problem ist, dass ich nicht weiß, wie man die normalisierte Antwort verwaltet.

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

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

Ich möchte mit Definitionen, die Worte zu einem reagieren Komponente zu übergeben. Wie kann ich die Wörter mit verschachtelten Definitionen abrufen und sie an meine Komponente rendern?

Answer 1

webpackbin DEMO

vorausgesetzt, dass Ihr Zustand so etwas wie dieses dann

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] 

sieht ... Wordlist kann wie folgt aussieht. Slice-IDs von Wörtern aus Staat, um die Liste zu machen

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

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

und Word-Komponente: Erhalten bestimmtes Wort aus dem Zustand von id von Requisiten, berechnen Definitionen Liste durch Karte

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); 

und DefinitionsList

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

Funktionskomponente wurde nur für kurze verwendet.