2017-11-19 30 views
1

私はReduxの店で、次の詩のJSONを持っている:反応コンポーネントにreduxのフェッチされたjsonを表示するにはどうすればいいですか?

poems: { 
'5a0f3367af648e17fa09df5d': { //this is my poem id 
    _id: '5a0f3367af648e17fa09df5d', //this is also the same as above 
    title: 'my first poem', 
    text: 'some lorem ipsum long text ', 
    userId: '5a03f045995c0f5ee02f9951', //this is my user id 
    __v: 0 
}, 
'5a0ff2a5b4a9591ecb32d49c': { 
    _id: '5a0ff2a5b4a9591ecb32d49c', 
    title: 'my second poem', 
    text: 'some lorem ipsum long text', 
    userId: '5a03f045995c0f5ee02f9951', //this is the same user id as above 
    __v: 0 
} 


} 

今私のコンポーネントを反応させるには、各詩のタイトルとテキストを表示する方法。ここで私は詩だけでなく2つの詩を持っています。しかし、詩の数はユーザーによって異なる場合があります。だから、基本的に私はこれらの詩を私のレビュックスストアから自分のコンポーネントに持ってきて、それをレンダリングする方法が必要です。

+0

に小道具として渡すことができます/ react-redux、特に接続関数 –

答えて

1

あなたは反応し、Reduxのhttps://github.com/reactjsを見て反応し、Reduxの状態の内容を取得するためにreact-reduxからconnectを使用して反応成分を

import React from 'react'; 
import _ from 'lodash'; 
import {connect} from 'react-redux'; 

class Poems extends React.Component { 
    render(){ 
     return (
      <div> 
       //poems from state will be passed as props to this component 
       {_.map(this.props.poems, poem => { 
        return (
         <div> 
          <div>{poem.title}</div> 
          <div>{poem.text}</div> 
         </div> 
       )} 
      </div> 
     ); 
    } 
} 

const mapStateToProps = (state) => ({ 
    poems: getPoems(state); //method to get poems from redux state 
}); 

export default connect(mapStateToProps)(Poems); 
+1

ありがとう@Ajay。あなたの答えはポイントでした。 –

+0

@SurajSharma、あなたの問題を解決してうれしいです。もしあなたが正しいと感じるなら、これをアップアップして、この答えに目をつけたいかもしれません。 –

関連する問題