Joshua Rajandiran Joshua Rajandiran - 4 months ago 24
Javascript Question

I can't dispatch my actions as props (React & Redux)

Here is how I use

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);


Here is the button which I used:

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


Here is the function to run:

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
}


I'm getting the error that
this.props.actions.stateToEntry()
is not a function. What's happening here actually & how do I solve this problem?

EDIT:

Here is the log data:
enter image description here

In other words its just adding the
{}
around it. I've tried using
{formStateActions}
alone and it didn't work but
formStateActions
worked.

For @LazarevAlexandr's, here is my actioncreator for
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'};
}


My locationActions actioncreator is quite long so I'd rather not post it fully here. They are all functions, some are actioncreators which return actions and some returns a function for fetching data lists from an api.

Answer

bindActionsCreators gets only two parameters, so if want to pass multiple actions sets try this:

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