1

応答を正規化するために normalizr を使用しています。

私の問題は、正規化された応答を管理する方法がわからないことです。 

{
  result:[]
  entities: {
    words: {
      //...
      1: {
       definitions: [1, 2, 3]
      }
      // other word objects...      
    },
    definitions: {

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

単語を定義付きの反応コンポーネントに渡したいです。定義がネストされた単語を取得してコンポーネントにレンダリングするにはどうすればよいですか。

4

1 に答える 1

1

webpackbin デモ

あなたの状態がこのように見えると仮定して

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 をスライスします

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

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

および Word コンポーネント: props から id で state から特定の単語を取得し、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);

および定義リスト

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

機能性成分とは、略して使用したものです。

于 2016-07-21T08:53:14.057 に答える