我正在使用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.
更多推荐
处理标准化响应的最佳方法是什么?
发布评论