September 2017
A practical guide to
Redux Form
Erik Rasmussen
Slide 2
Slide 2 text
Thanks to our sponsors!
Slide 3
Slide 3 text
codesponsor.io
Slide 4
Slide 4 text
FORMS
the hardest problem
in front-end web development
Photo by Tim Gouw on Unsplash
Slide 5
Slide 5 text
Why are forms so hard?
• Much more back and forth communication with the
user
• The rate of state change is much higher
• Validation
• Asynchronous network communication
Slide 6
Slide 6 text
Good News
Bad News
☹
Slide 7
Slide 7 text
React
Slide 8
Slide 8 text
React
Slide 9
Slide 9 text
Unidirectional Data Flow
• Data flows down from parent to child components
• A parent never asks its child for its state
• A child can only update state by calling a callback
that its parent gave it.
Slide 10
Slide 10 text
Unidirectional Form Data Flow
• User types into an input, which...
• Dispatches an event, which...
• Updates the value in some canonical data store,
which...
• Causes the input to be re-rendered with the new
value.
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Component Tree
Slide 17
Slide 17 text
Component Tree
Slide 18
Slide 18 text
Component Tree
Slide 19
Slide 19 text
Redux
Slide 20
Slide 20 text
Redux Form
Slide 21
Slide 21 text
Redux Form consists of:
• A single reducer
• A higher order form component
• A Field component
• A smattering of other useful components and
Redux selectors