reduxで店舗にデータを表示するにはどうすればいいですか？

Question

私はreacts/reduxで始まり、ストア/ステートの周りで頭を上げようとしています。私は正常にデータを受信し、これを減速機に渡すコンポーネントを作りました。これは私のコンポーネントです：

'use strict'; 

var React = require('react'); 
var PropTypes = React.PropTypes; 

import axios from 'axios'; 
import store from '../../store'; 
import {getDataSuccess, getDataFail} from '../../actions/userData-actions' 
import {connect} from 'react-redux'; 

class ServiceDetails extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      tabs: null, 
      tabContent: null 
     } 
    } 

    componentDidMount() { 
     axios.get('http://localhost:3001/0') 
      .then(response => { 
       console.log('getservicedetails=response.data', response.data); 
       store.dispatch(getDataSuccess(response.data)); 
       return response; 
      }) 
      .catch(function (error) { 
       console.log(error); 
       store.dispatch(getDataFail(error)); 
      }); 

    } 

    render() { 
     return (
      <section className="ServiceDetails"> 
       <h1>id:{props.userData.users[0].id}</h1> 
       service details new 
      </section> 
     ) 
    } 
} 


const mapStateToProps = function (store) { 
    console.log('Servicedetails mapStatetoprops =',store); 
    return { 
     data: store.datas, 
     userData: store.apiData 
    }; 
}; 

export default connect(mapStateToProps)(ServiceDetails); 

mapstatetoProps関数はデータを受け取りますが、このデータをどのようにレンダリングできますか？ストアからデータを表示するにはどうすればよいですか？

Answer 1

レンダリングする前に、配列の長さが0より大きいかどうかを確認しています。

Answer 2

コードにレデューサーが表示されませんでした。また、あなたの関数は、この

const mapStateToProps = function (store) { 
    return { 
    data: store.data, 
    userData: store.apiData 
    }; 
}; 

は、コンポーネントを再レンダリングする小道具、&に新しい状態をマッピングします。その結果、 コンポーネントは新しい/更新されたデータで更新されます。

はまた、これらのものを確認し、可能な場合は修正してください。

• あなたのレンダリング機能にthis.props.userDataないprops.userDataを使用する必要があります。
• Providerを使用することで、ストアはすべてのコンポーネントにわたって使用されます。

mapStateToProps関数のもう1つのtypo ["datas"]。 データの単一ユニットをデータ&と呼びます。複数のデータムをデータではなくデータと呼びます。