Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Practical Guide to Redux Form

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

Erik Rasmussen

September 29, 2017
Tweet

More Decks by Erik Rasmussen

Other Decks in Programming

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