¿Maneja solicitudes asíncronas con React, Redux y Axios?
Soy nuevo en React JS y Redux y ha sido demasiado abrumador para empezar. Estoy tratando de hacer una solicitud POST usando Axios, pero no puedo hacerlo. Puede ser que me falta algo en el archivo contenedor. Debajo está el código. Chequeplnkr
Actualizar: Recibo el mensaje @@ redux-form / SET_SUBMIT_SUCCEEDED después de enviarlo. Pero cuando reviso la pestaña de red, no veo la llamada a la API. Y también cuando estoy consolando los valores enviados, solo veo valores de nombre y nombre completo. No consta de logotipo y detalles. ¿Qué me estoy perdiendo?
Archivo componente
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Field,reduxForm } from 'redux-form'
import { Columns,Column, TextArea, Label,Button } from 'bloomer'
import FormField from 'FormField'
const validate = (values) => {
const errors = {}
const requiredFields =
['organizationName','organizationFullName','organizationDetails']
requiredFields.forEach((field) => {
if (!values[field]) {
errors[field] = 'This field can\'t be empty!'
}
})
return errors
}
const formConfig = {
validate,
form: 'createOrganization',
enableReinitialize: true
}
export class CreateOrganization extends PureComponent {
static propTypes = {
isLoading:PropTypes.bool.isRequired,
handleSubmit: PropTypes.func.isRequired, // from react-redux
submitting: PropTypes.bool.isRequired // from react-redux
}
onSubmit = data => {
console.log(data)
}
render () {
const { handleSubmit,submitting,isLoading } = this.props
return (
<Columns isCentered>
<form onSubmit={handleSubmit(this.onSubmit.bind(this))} >
<Column isSize='3/6' >
<Label>Organization Name</Label>
<Field
name="organizationName"
component={FormField}
type="text"
placeholder="Organization Name"
/>
</Column>
<Column isSize='3/6'>
<Label>Organization Full Name</Label>
<Field
name="organizationFullName"
component={FormField}
type="text"
placeholder="Organization Full Name"
/>
</Column>
<Column isSize='3/6'>
<Label>Organization Logo</Label>
<Input
name="organizationLogo"
type="file"
placeholder="Logo"
/>
</Column>
<Column isSize='3/6'>
<Label>Organization Details</Label>
<TextArea placeholder={'Enter Details'} />
</Column>
<Column >
<span className="create-button">
<Button type="submit" isLoading={submitting || isLoading} isColor='primary'>
Submit
</Button>
</span>
<Button type="button" isColor='danger'>
Cancel
</Button>
</Column>
</form>
</Columns>
)
}
}
export default reduxForm(formConfig)(CreateOrganization)
Archivo contenedor
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Loader from 'Loader'
import organization from 'state/organization'
import CreateOrganization from '../components/createOrganization'
export class Create extends PureComponent {
static propTypes = {
error: PropTypes.object,
isLoaded: PropTypes.bool.isRequired,
create: PropTypes.func.isRequired,
}
onSubmit = data => {
this.props.create(data)
}
render () {
const { isLoaded, error } = this.props
return (
<CreateOrganization onSubmitForm={this.onSubmit} isLoading=
{isLoading} />
)
}
}
const mapStateToProps = state => ({
error: organization.selectors.getError(state),
isLoading: organization.selectors.isLoading(state)
})
const mapDispatchToProps = {
create: organization.actions.create
}
export default connect(mapStateToProps, mapDispatchToProps)(Create)