Каков наилучший способ справиться с нормализованным ответом?

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] 

тогда ... WordList может выглядеть так. Нарежьте идентификаторы слов из состояния, для того, чтобы сделать список

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

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

и Слово компоненты: Получить конкретное слово из состояния по идентификатору из реквизита, вычислить список определений через карту

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

Функциональный компонент использовался только для краткости.