我无法将我的行为作为道具(React& Redux)发送

时间:2016-07-15 04:07:49

标签: javascript reactjs redux react-redux

以下是我使用connect的方式:

function mapStateToProps(state, ownProps) {
    return {
    // we'll call this in our component -> this.props.listingData
    listingData: state.locations.listingData,

    //we'll call this in out component -> this.props.formState
    formState: state.formStates.formState
    };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(locationActions, formStateActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(homePage);

这是我使用的按钮:

<div onClick={this.stateToEntry} className="addButton">Add</div>

以下是要运行的功能:

stateToEntry() {
        this.props.actions.stateToEntry();//formStateActions.stateToEntry();//dispatch an action to update the Redux store state
        browserHistory.push('/location');//then redirect to the add/edit/delete page using browserHistory
    }

我收到this.props.actions.stateToEntry()不是函数的错误。实际上在这里发生了什么&amp;我该如何解决这个问题?

修改

这是日志数据: enter image description here

换句话说,它只是在它周围添加{}。我曾尝试单独使用{formStateActions},但它没有工作,但formStateActions有效。

对于@ LazarevAlexandr,这是formStateActions的动作生成器:

export function stateToEntry() {
    return { type: types.STATE_TO_ENTRY, formState: 'entry-mode'};
}

export function stateToEdit() {
    return { type: types.STATE_TO_EDIT, formState: 'edit-mode'};
}

export function stateToDelete() {
    return { type: types.STATE_TO_DELETE, formState: 'delete-mode'};
}

我的locationActions actioncreator很长,所以我不想在这里完全发布。它们都是函数,有些是返回动作的动作生成器,有些返回从api获取数据列表的函数。

1 个答案:

答案 0 :(得分:2)

bindActionsCreators只获取两个参数,因此如果要传递多个动作集,请尝试以下方法:

function mapDispatchToProps(dispatch) {
  const actions = Object.assign({}, locationActions, formStateActions);
  return {
    actions: bindActionCreators(actions, dispatch)
  };
}