5. Convert to Field
By default, Redux Form cannot see any form
elements. It uses the special <Field> component that
renders its own elements with the necessary checks
and hooks required to make everything work.
Replace the <input> element with the <Field>
component from the Redux Form package. The
‘component’ prop defines an element to render. Any
other prop is then passed to that component.<Field
name='name'
component='input'
type='text'
/>6. Pass submission function
Forms in React will always submit their values using
a passed ‘onSubmit’ prop. These forms are no
different, but require a slightly different method in
order to hook into the Redux Form ecosystem.
By passing them a ‘handleSubmit’ prop, Redux
Form wraps its own behaviours around the function.
Use this prop to submit the form instead.Capturevisitor data with Redux Form
<form onSubmit={handleSubmit}>
[...]
</form>7. Handle form submission
The form isn’t currently passed this submit function
yet. Open up the container at components/
container/UserForm/UserForm.js and add it in.
As the container is connected to the store, we
can use our existing thunk-based approach to
submit the data. Hook up ‘handleSubmit’ to call the
‘submitUser’ thunk action.handleSubmit(values) {
return this.props.submitUser(values);
}
render() {
return (
<Form
onSubmit={this.handleSubmit} />
);
}8. Create submitUser action
The submitUser function itself is similar to the
existing submitComment action creator. We get the
current user ID and submit a PATCH request to the
backend to update the username.
Once that’s successful, we dispatch an
action to let the rest of the application know.
Open up actions/user/user.js and add the
action creator.Validate with props
Rules can be applied directly on the <Field>
component itself using the ‘validate’ prop. This can
be useful for common repeated rules, such as if a
field is required.Tutorials
export const submitUser = values =>
(dispatch, getState) => {
dispatch(submitUserStart());
const user = getCurrentUser(
getState());
return axios
.patch(`http://localhost:3001
/users/${user.id}`, values)
.then(({ data }) => dispatch(
submitUserSuccess(data)))
};9. Update local username
Even though we have changed our username on the
form, it still has the old username at the top of the page.
When the form successfully submits, we dispatch
our own ‘SUBMIT_USER_SUCCESS’ action containing
the new username. We can pick this up in a reducer
and update the data. Open up reducers/user/user.js
and add a case to handle this action.case SUBMIT_USER_SUCCESS:
return state.set('name',
action.payload.name);10. Create a custom component
While our input works, it does not yet have any
styles. Instead of applying some directly to each field
we would make, we can use the power of React
components to our advantage. By using a shared
component across all test inputs, any updates we
make will benefit every field that uses it.1074 __tutorial