Capturevisitor data with Redux Form
Tutorials
validate
})(User);17. Handlesubmitfailure
If we try and saveourusernameas‘Lauren’nothing
happens. We cannothavetwouserswiththesame
username andLaurenis alreadytaken.Weshould
surface that errorontheformfortheuser.
Forms managedbyReduxFormwillalsobe
given an ‘error’prop.Showthisvalueafterthe
<Button> component.{error && <div className='
user form__error'>{error}</div>}18. Returna SubmissionError
If the ‘handleSubmit’promiserejects,theformwill
be told the submissionfailed.Rightnowweignore
submission errors,sothepromiseresolvesinstead.
Redux Formprovidesa special‘SubmissionError’
throwable errorthatcanrejectthepromiseand
provide the reasonswhybacktotheform.
Update the‘submitUser’actioncreatorpromise
insideactions/user/user.jstothrowthiserrorif
unsuccessful.The‘_error’propertywillapplythis
errortotheform..catch(() =>
{
dispatch(submitUserError());
thrownew SubmissionError({
_error:'Could not savedetails' });
});19 .Generateinitialvalues
Thisforminitialiseswitha blankfield.Asuserswill
alreadyhavea username,it makessensetopre—fill
thisfieldwiththisdata.
AsthisdataalreadylivesinRedux,wecanusea
selectortopullit outfortheform.Makesurethe
keysofthereturnedobjectmatchuptothefield
namesandReduxFormdoestherest.Openup
selectors/user/user.jsandcreatethatselector.exportconst
getInitialValuesForUserForm = state
=> ({
name: state.user.name
});20 .Passinitialvaluestoform
Tokeepeverythingseparated,theinitialvaluesneed
togetpassedtotheformcontainerbeforehitting
theformitself.
UsethemapStateToPropsmethodinside
components/container/UserForm/UserForm.jsto
insertthevalues,thenpassit totheformitself.<Form
initialValues={this.props
.initialValues}
onSubmit={this.handleSubmit}
/>[...]export const mapStateToProps =
state => ({
initialValues:
getInitialValuesForUserForm(state)
});21. Allow reinitialisation
The existing username still doesn’t appear if we land
on this page first. When the form initialises, the
username is undefined. It only comes through once
the username has loaded in asynchronously.
In order to update the form for this situation, we
need to add a final piece of configuration to the
form’s options. This would allow the form to
reinitialise when the initial values update.
Reopen components/forms/User/User.js and add
‘enableReinitialize’ to the options.export default reduxForm
({
enableReinitialize: true,
form: 'user',
validate,WhileReduxFormis greatatmanaginglarge forms
alongsideRedux,it is a heavytoolthatmaybe
excessive for smaller applications. What alternatives
are there that can help construct forms?
The similarly named React Redux Form
is another tool that keeps form data in sync
with Redux. Reducers are set up for each form
with components binding their values to their
data. While functional, this package is now
in maintenance mode and will not get any
new features.
When working with lots of smaller forms,
it may not make sense to connect them to the
Redux store. Formik is a tool that uses supplied
React components to contain the state of the
store. Other components link their inputs to the
state without having to manually create handlers.
Other configuration, such as validation, are passed
through as props.Alternatives to Redux Form
1976 __tutorial