A Practical Guide to Redux Form

The author of Redux Form gives an introduction to forms in React and how to build forms with Redux Form.

Most of the good stuff was in the live demo, unfortunately... ☹️

The code can be found here: https://github.com/erikras/reactalicante2017

Transcript

1. September 2017
   A practical guide to
   Redux Form
   Erik Rasmussen
   

   View Slide

2. Thanks to our sponsors!
   

   View Slide

3. codesponsor.io
   

   View Slide

4. FORMS
   the hardest problem
   in front-end web development
   Photo by Tim Gouw on Unsplash
   

   View Slide

5. 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
   

   View Slide

6. Good News
   Bad News
   ☹
   

   View Slide

7. React
   
   

   View Slide

8. React
   
   

   View Slide

9. 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.
   

   View Slide

10. 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.
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. Component Tree
    

    View Slide

17. Component Tree
    

    View Slide

18. Component Tree
    

    View Slide

19. Redux
    

    View Slide

20. Redux Form
    

    View Slide

21. Redux Form consists of:
    • A single reducer
    • A higher order form component
    • A Field component
    • A smattering of other useful components and
    Redux selectors
    

    View Slide

22. LIVE
    CODING
    Photo by Dawn Armfield
    

    View Slide

23. Redux Form Downloads
    

    View Slide

24. redux-form.com
    @erikras
    Thank you!
    ¡Muchísimas gracias!
    @ReduxForm
    

    View Slide