通過ID獲得員工的詳細reactjs - 終極版

Question

我福利局到reactjs

我希望得到員工細節哪個ID是3員工時，頁面加載（http://localhost:8080/employees/3）。

我的代碼：

EmpPage.js

import React,{PropTypes} from 'react'; 
import {connect} from 'react-redux'; 
import {getEmp} from '../../actions/empActions'; 
import configureStore from '../../store/configureStore'; 

const store = configureStore(); 

class EmpPage extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
    } 

    componentWillMount() { 
     var id = this.props.params.id; 
     store.dispatch(getEmp({'userId': id})); 
    } 

    render() { 
     const emp = this.props.emp; 
     console.log('emp================', emp); //issue: get blank object 
     return (
      <div> 
       <h1>Emp Page...</h1> 
      </div> 
     ) 
    } 

} 

EmpPage.propTypes = { 
    emp: PropTypes.object.isRequired, 
    children: PropTypes.object 
}; 

function mapStateToProps(state, ownProps) { 
    return { 
     emp: state.emp 
    }; 
} 


export default connect(mapStateToProps)(EmpPage); 

我希望得到員工的細節，我得到空對象

render() { 
     const emp = this.props.emp; 
     console.log('emp================', emp); //issue: get blank object 
     return (
      <div> 
       <h1>Emp Page...</h1> 
      </div> 
     ) 
    } 

API響應獲得成功，當調用componentWillMount()，但狀態未在mapStateToProps（）中設置。

但是當我調用store.dispatch(getEmp({'userId': id}));形式的index.js形式爲componentWillMount()時，則狀態emp: state.emp在mapStateToProps中成功設置。

所以，我想獲取員工詳細信息，當頁面加載並顯示在HTML頁面。

Answer 1

它看起來就像你正在創建一個新的存儲和分發它：

const store = configureStore(); 

...

store.dispatch(getEmp({'userId': id})); 

而是直接擊中store的，你應該將行動創造者綁定到通過定義mapDispatchToProps參數connect從<Provider>提供商店。

編輯：相關的變化將是這樣的：

componentWillMount() { 
    var id = this.props.params.id; 
    this.props.getEmp({'userId': id})); 
} 


export default connect(mapStateToProps, { getEmp })(EmpPage);