Fala galera, apos apanhar muito e não ter mais para onde ir, vim pedir a ajuda de vocês.
Meu cenário é estou com um formulário onde os campo são os fields dos redux-forms. Estou precisando, após o submit, limpar os campos, eu já li a documentação mas o código não funciona, apenas passando o dispatch(reset('nomeDoForm')).
Sei que pode parecer rídiculo, mas estou apanhando para fazer limpar o formulário, no botão Reset, até funciona, mas na action não
Alguém já passou por isso e/ou poderia me dar uma ajuda, abaixo meu código.
Action:
import axios from 'axios'
import { toastr } from 'react-redux-toastr'
import {reset as resetForm} from 'redux-form';
export const INIT = 'INIT';
const baseURL = 'http://localhost:3333/'
export const create = (values) => {
axios.post(`${baseURL}usuario`, values)
.then(resp => {
toastr.success('Sucesso', 'Operação realizada com sucesso')
dispatch(resetForm('userForm'))
})
.catch(e => {
e.response.data.forEach(error => {
toastr.error('Erro', error)
});
})
}
Reducer:
import * as UsuarioConstants from '../Actions/UsuarioActions'
const INITIAL_STATE = { nome: 'teste', login: '', senha: '', email: '', list: [] }
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case UsuarioConstants.INIT:
return { ...state}
case UsuarioConstants.LIMPAR_CAMPOS:
return { ...state, nome: '', login: '', senha: '', email: '' }
default:
return state
}
}
Formulário:
import React, { Component } from 'react'
import { reduxForm, Field } from 'redux-form'
import { bindActionCreators } from 'redux'
import { create } from '../../main/Actions/UsuarioActions'
import Nav from '../components/Menu/Nav'
import Rodape from '../components/Rodape'
import { connect } from 'react-redux'
class UsuarioForm extends Component {
render() {
const { handleSubmit, pristine, reset, submittinng } = this.props
const submit = (data, create) => {
create(data)
}
return (
<div>
<Nav />
<form role="form" onSubmit={handleSubmit((fields) => submit(fields, create))}>
<div className="box-body">
<Field name="nome" component="input" />
<Field name="login" component="input" />
<Field name="senha" component="input" />
<Field name="email" component="input" />
</div>
<div className="box-footer">
<button type="submit" className="btn btn-primary">Submit</button>
<button type="button" className="btn btn-danger" disable={pristine || submittinng} onClick={reset}>Reset</button>
</div>
</form>
<Rodape />
</div>
)
}
}
const Form = reduxForm({
form: 'userForm'
})(UsuarioForm)
const mapStateToProps = state => ({ nome: state.usuario.nome })
const mapDispatchToProps = dispatch => bindActionCreators({
create
}, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Form)