etting data out of a React form is not
a straightforward task. The most
common approach is to use controlled
components – fields that have their
values written to component state, which would then
pass the state back when the form submits.
While this approach works, it can get complicated
very quickly. Having to write change handlers for
each field is one thing, but other features such as
validation or formatting have to be done separately
and updated in parallel.
One of Redux’s great benefits is that there is one
application-wide state accessible anywhere it is
needed. If we were able to access the form data at
any point in the application, it opens up many
different possibilities for future interactions.
Redux Form is a package that supplies all this
behaviour in one place. By hooking into an existing
Redux store, form components write their data to the
store as it changes. The package also takes care of
making sure that data is validated and formatted
correctly. The form will not submit if it is not.
In this tutorial, we create the final piece of our
Photo Share application, making a page the user can
update their username on. By writing a custom
component, the form can show validation feedback
at the right time without having to deal with lots of
event listeners.
- Install dependencies
Before we get started, we need to make sure all the
project’s dependencies are ready to go. Aside from
the usual React and Redux, this also includes the
‘reduxform’ package that is in charge of all the form
logic we are going to use.
Open up a couple of command line windows and
install the dependencies for both the React app and
the backend server. They both need to be running
at the same time.
> cd app
> yarn && yarn start
> cd server
> yarn && yarn start- Add to root reducer
All of the benefits of Redux Form will happen in its
own slice of the state. This is created by including
the provided form reducer inside the
‘combineReducers’ method from Redux.
Open up the root reducer at reducers/root.js.
Import Redux Form’s form reducer and include it
alongside the rest of the existing ones.
import { reducer as formReducer }
from 'redux form';const rootReducer = combineReducers({
[...]
form: formReducer,
});G
Keep forms separate
Itmaybetemptingtohavesubmissionlogicand
otherReduxdatasourceinsidethesamefileas
theformitself,butkeepingthemseparatemakes
thingsclearerandmorestraightforwardtotest.Tutorials
componenttolinkthetwotogether.
The‘reduxForm’functiontakesa setof
configurationoptionsandreturnsa component.This
componentcanbewrappedaroundourformto
initialisea connectionbetweenthem.
Updatethedefaultexporttousethisfunction.
Thenamewepassinis a uniquereferencetothis
forminsidetheReduxstore.exportdefault reduxForm({
form: 'user'
})
(User);423. Build out the form
We are going to be making the form that lets the
user edit their username. Head to /user in the
browser to see where this form will go.
The form component itself lives inside components/
forms/User/User.js. Add an outline of the form to the
existing User component there. This will be enhanced
with Redux Form throughout the rest of the tutorial.return (
<form>
<label>
Username
<input name='name' />
</label>
<Button>Submit</Button>
</form> );4. Connect the form to Redux
With the form in place, we now need to hook it up to
the store. Redux Form uses a higher-ordertutorial _________________________________________________ 73