Question

我正在使用bindActionCreators来调度动作，但我得到了空对象。我有以下代码

主要组件

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {Row, Form,  FormGroup, FormControl, Button, Col} from 'react-  bootstrap';
import * as RegisterActions from 'actions/betaPageActions';

export default class LoginForm extends React.Component {
constructor(props) {
  super(props);
  let { register, dispatch } = this.props;
  this.state = register;
  this.actions = bindActionCreators(RegisterActions, dispatch);
}

handleChange(item, e) {
  const change = this.props.register;
  change[item] = e.target.value;
  console.log("change", change);
  this.actions.handlechanges(change);
}

render () {
return (
    <Row>
        <Col md={12}>
             <Form inline className="login-beta">
              <FormGroup controlId="formControlsSelect">

                <FormControl componentClass="select" placeholder="I am.."
                onChange={this.handleChange.bind(this, 'type')}>
                  <option value="">I am..</option>
                  <option value="startup">Startup</option>
                  <option value="investment_company">Investment Company / Group</option>
                  <option value="surfer">Individual Investor / Surfer</option>
                </FormControl>
              </FormGroup>
              {' '}
              <FormGroup controlId="formInlineEmail">

                {' '}
                <FormControl type="email" placeholder="Email address" 
                onChange={this.handleChange.bind(this, 'email')}/>
              </FormGroup>
              {' '}
              <Button type="submit">
                I'M IN!
              </Button>
            </Form>

        </Col>
    </Row>  


  );
 }
}

function mapStateToProps(state) {
 const { register } = state;
 return {
   register
 };
}

LoginForm.propTypes = {
 register: React.PropTypes.object,
 dispatch: React.PropTypes.func.isRequired
};

export default connect(mapStateToProps)(LoginForm);

以下是行动档案

操作

import * as types from 'constants';
import api from 'utils/api/beta';

export function handleChanges(changes) {
  return {
    type: types.HANDLEREGISTERATTR,
    payload: {
     changes
    }
  }
}

当我记录RegisterActions时，我可以看到handleChanges函数但是当我使用bindActionCreators（RegisterActions，dispatch）时，我得到了空对象。我错过了什么吗？

Answer 1

您需要声明另一个mapDispatchToProps，它将带您的动作创建者并将其与调度绑定

mapDispatchToProps = (dispatch) => (bindActionCreators ({
   RegisterActions : RegisterActions
},dispatch)

//connect should be changed to
connect(mapStateToProps, mapDispatchToProps)(LoginForm);

然后在您的props中，您将有一个函数RegisterActions，它将发送一个redux动作

this.props.RegisterActions()

bindActionCreators返回空对象 - Redux

1 个答案: