redux-form doesn't get submitted - redux

Question

I have a strange bug in my app. I want to let the user update the name of a group via redux form. Exchanging the old name with the input field works without problem, but when I click on Submit, then nothing happens. This is very strange for me, because I am using the same form to create the group in the first place and there it works totally fine.
import React, { Component } from 'react';
import { connect} from 'react-redux';
import { deleteAccessGroup, editAccessGroup } from '../actions/UserActions';
import { showModal } from '../actions/ModalActions';
import * as types from '../actions/index';
import AccessGroupCreation from '../components/AccessGroupCreation';
class AccessGroupElement extends Component {
constructor(props) {
super(props);
this.state = {
toggle: false
}
}
handleSubmit = values => {
this.props.editAccessGroup(values);
console.log(this.state, "Das sind die values: ", values);
this.edit;
console.log(this.state);
}
edit = () => this.setState({toggle: !this.state.toggle});
delAccessGroup = () => this.props.deleteAccessGroup(this.props.accessGroup.id);
showPicModal = () => {
let id = this.props.accessGroup.id;
this.props.showModal(types.MODAL_TYPE_PICUPLOAD, {
title: 'Please upload a Profile Picture',
onConfirm: (pic) => {
console.log(this.props.accessGroup.id);
console.log( pic)
}
});
}
render() {
const accessGroup=this.props.accessGroup;
return(
<div className="row" id="hoverDiv">
<div className="col-lg-1"></div>
{this.state.toggle ?
<div className="col-lg-9">
<AccessGroupCreation onSubmit={this.handleSubmit} />
</div> :
<div className="col-lg-9">{accessGroup.name}</div>}
<div className="col-lg-2">
<button type="button" onClick={this.delAccessGroup}
className="btn btn-default btn-sm pull-right">
<span className="glyphicon glyphicon-trash"></span>
</button>
<button type="button" onClick={this.edit}
className="btn btn-default btn-sm pull-right">
<span className="glyphicon glyphicon-pencil"></span>
</button>
</div>
</div>
);
}
}
export default connect(null, { deleteAccessGroup, editAccessGroup, showModal })(AccessGroupElement);
Here is the form component:
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const required = value => value ? undefined : 'Required';
const lengthFunction = (min, max) => value =>
value && (value.length > max || value.length < min) ? `Must be between ${min} and ${max} characters` : undefined
const length = lengthFunction(5, 20);
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<input {...input} placeholder={label} type={type} className="form-control"/>
{touched && (error && <span>{error}</span>)}
</div>
);
const AccessGroupCreation = (props) => {
const { handleSubmit, pristine, submitting } = props;
return (
<form className="form-inline" onSubmit={handleSubmit}>
<div className="input-group">
<Field name="name" type="text"
component={renderField} label="Add an Access Group"
validate={[ required, length]}/>
<span className="input-group-btn">
<button className="btn btn-success" disabled={pristine || submitting}
value="this.state.value" type="submit">
<span className="glyphicon glyphicon-send"></span>
Submit
</button>
</span>
</div>
</form>
)
}
export default reduxForm({
form: 'AccessGroupCreationForm' // a unique identifier for this form
})(AccessGroupCreation)
Help, as always, would be very much appreciated.

Answer 1

Issue is in this code:
handleSubmit = values => {
this.props.editAccessGroup(values);
console.log(this.state, "Das sind die values: ", values);
this.edit; // call this function this.edit();
console.log(this.state);
}

Answer 2

The problem is that your editAccessGroup function isn't tied to your store. Right now, it's creating and returning an action, but that action isn't being dispatched.
The way I'd usually implement it is to use react-redux's connect function and use mapDispatchToProps to bind the actionCreator to your store's dispatch function.

Answer 3

Change few thing as-
...
class AccessGroupElement extends Component {
constructor(props) {
...
}
submit = values => { // rename this function
this.props.editAccessGroup(values);
console.log(this.state, "Das sind die values: ", values);
this.edit;
console.log(this.state);
}
....
render() {
const accessGroup=this.props.accessGroup;
return(
<div className="row" id="hoverDiv">
........
<div className="col-lg-9">
<AccessGroupCreation submit={this.submit} /> // change here
</div> :
.........
</div>
);
}
}
export default connect(null, { deleteAccessGroup, editAccessGroup, showModal })(AccessGroupElement);
then on your form-
const AccessGroupCreation = (props) => {
const { handleSubmit, pristine, submitting, submit } = props; // getting submit function
return (
<form className="form-inline" onSubmit={handleSubmit(submit)}>
.......
</form>
)
}
export default reduxForm({
form: 'AccessGroupCreationForm' // a unique identifier for this form
})(AccessGroupCreation)

Answer 4

Okay, the problem was the use of react-collapsible. It seems like the event handlers "clash", when having redux-form inside/replacing a collapsible. I changed the code and now it works:
<div className="row" id="hoverDiv" key={ accessGroup.id }>
<div className="col-lg-1"/>
{
this.state.toggle ?
<div className="col-lg-9">
<AccessGroupEdit onSubmit={this.handleSubmit} />
</div> :
<div className="col-lg-9">
<Collapsible trigger={accessGroup.name}>
<small><i>Apps:</i></small>
<ul className="list-inline">
{accessGroup.apps.map(group => {
return <li key={group.id}><img width="75px"
height="50px"
src={group.image}
alt={group.name} />
</li>})}
</ul>
<hr />
<small><i>Permissions:</i></small>
<ul className="list-inline">
{Object.keys(accessGroup.permissions).map(permission => {
return accessGroup.permissions[permission] ?
<li key={permission}>
<span className="label label-primary">{permission}</span>
</li> : ""
})}
</ul>
</Collapsible>
</div>
}
<div className="col-lg-2">
<button type="button" onClick={this.delAccessGroup}
className="btn btn-default btn-sm pull-right">
<span className="glyphicon glyphicon-trash"></span>
</button>
<button type="button" onClick={this.edit}
className="btn btn-default btn-sm pull-right">
<span className="glyphicon glyphicon-pencil"></span>
</button>
</div>
</div>