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

More Decks by Erik Rasmussen

Other Decks in Programming


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

  2. Thanks to our sponsors!

  3. codesponsor.io

  4. FORMS the hardest problem in front-end web development Photo by

    Tim Gouw on Unsplash
  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
  6. Good News Bad News ☹

  7. React

  8. React

  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.
  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.
  11. None
  12. None
  13. None
  14. None
  15. None
  16. Component Tree

  17. Component Tree

  18. Component Tree

  19. Redux

  20. Redux Form

  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
  22. LIVE CODING Photo by Dawn Armfield

  23. Redux Form Downloads

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