정규화 된 응답을 처리하는 가장 좋은 방법은 무엇입니까?

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

기능 부품이 짧게 사용되었습니다.