What's The Best Way To Deal With A Normalized Response?

I'm using normalizr to normalize a response. My problem is that I don't know how to manage the normalized response. { result:[] entities: { words: { //... 1

Solution 1:

webpackbin DEMO

assuming that your state looks something like this

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]

then... WordList may looks like this. Slice ids of words from state, in order to render list

constWordList = ({ids}) => <div>{ids.map(id => <Wordid={id}key={id}/>)}</div>;

exportdefaultconnect(state =>({ ids:state.wordsById }))(WordList);

and Word component: Get particular word from state by id from props, calculate definitions list through map

constWord = ({word, definitions}) =>(
    <divclassName="word-block"><span>{word.text}</span><DefinitionsListdefinitions={definitions}/></div>
)

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

exportdefaultconnect(mapStateToProps, actions)(Word);

and DefinitionsList

constDefinitionsList = ({definitions})=> (
    <divclassName="definitions">
        {definitions.map(def =><divkey={def.id}>{def.text}</div>)}
    </div>
);

Functional compontent was used just for short.