处理标准化响应的最佳方法是什么? [英] What's the best way to deal with a normalized response?

问题描述

我正在使用normalizr标准化响应.

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: {
       definitions: [1, 2, 3]
      }
      // other word objects...      
    },
    definitions: {

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

我想将单词传递给带有定义的react组件.如何检索具有嵌套定义的单词并将其呈现给我的组件.

I want to pass the words to a react component with definitions. How can I retrieve the words with nested definitions and render it to my component.

推荐答案

webpackbin演示版

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]

然后... WordList可能看起来像这样.从状态中切出单词的ID，以呈现列表

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

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

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

和单词组件:通过道具的ID从状态中获取特定单词，通过地图计算定义列表

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

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

and DefinitionsList

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

功能组件只是简短的使用.

Functional compontent was used just for short.

这篇关于处理标准化响应的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！