Question

我是反击的新手

我希望在员工页面加载（3）时获取员工详细信息，其ID为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}));表单的componentWillMount ()形式的index.js时，emp: state.emp已成功设置状态mapStateToProps。

所以，我希望在页面加载时获取员工详细信息，并将其显示在html页面中。

Answer 1

看起来你正在创建一个新商店并发送给它：

const store = configureStore();

...

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

您不应直接点击store，而应通过定义<Provider>的{{1}} arg将您的操作创建者绑定到mapDispatchToProps提供的商店。

编辑：相关的变化如下：

connect

在reactjs-redux中通过id获取员工详细信息

1 个答案: