Как отображать данные в магазине в redux?

Question

Я только что начал с реагирует/сокращает и пытается окунуться в магазин/состояние. Я построил компонент, который успешно получает данные, а затем передает это в редуктор. Это мой компонент:

'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 в вашей визуализации функции.
• Использование Провайдера, чтобы хранилище использовалось для всех компонентов.

Еще одна вещь, опечатка ["datas"] в вашей картеStateToProps функция. Единая единица данных называется datum & более чем одно имя называется данными, а не данными.