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

Abstracted Form State with Redux Form

Abstracted Form State with Redux Form

The creator of Redux Form explains the trend of abstracting form state out of the DOM and into higher data structures that are easier to reason about, debug, and develop.

Video here: https://youtu.be/eDTi7lYR1VU

Erik Rasmussen

July 16, 2016
Tweet

More Decks by Erik Rasmussen

Other Decks in Programming

Transcript

  1. ABSTRACTED FORM STATE
    WITH REDUX-FORM
    @erikras - Erik Rasmussen
    JSChannel 2016 - Bengaluru

    View Slide

  2. HTML FORMS

    View Slide

  3. JAVASCRIPT COMES TO FORMS

    View Slide

  4. AJAX
    ASYNCHRONOUS JAVASCRIPT AND XML

    View Slide

  5. THE AGE OF JQUERY

    View Slide

  6. THE AGE OF JQUERY

    View Slide

  7. WHAT IS FORM STATE?
    ▸ What are the values of each field in the form?
    ▸ Which fields are in the form?
    ▸ Are the field values valid?
    ▸ Which form elements has the user touched?
    ▸ Which field is currently active?
    ▸ Have the values changed from their original values?
    ▸ Is some sort of async validation happening right now?
    ▸ Is the form being submitted?

    View Slide

  8. TWO WAY BINDING

    View Slide

  9. TWO WAY BINDING

    View Slide

  10. REACT

    View Slide

  11. FORMS IN REACT
    ▸ Details of reading values from different types of inputs is
    abstracted away
    ▸ Events are wrapped in a SyntheticEvent to hide
    browser idiosyncrasies.
    ▸ Variations on how different DOM inputs announce
    changes are all wrapped in onChange.
    ▸ Controlled Inputs

    View Slide

  12. WHAT ARE CONTROLLED INPUTS?
    ▸ Controlled inputs are inputs that will always
    render with the value it is given as a prop.
    ▸ No matter what you try to type into this input, it
    will always render with username as the value.
    ▸ This takes control away from the DOM.

    View Slide

  13. SIMPLEST REACT FORM

    View Slide

  14. SIMPLEST REACT FORM

    View Slide

  15. SIMPLEST REACT FORM

    View Slide

  16. SIMPLEST REACT FORM

    View Slide

  17. SIMPLEST REACT FORM

    View Slide

  18. SIMPLEST REACT FORM

    View Slide

  19. SIMPLEST REACT FORM

    View Slide

  20. SIMPLEST REACT FORM

    View Slide

  21. SIMPLEST REACT FORM

    View Slide

  22. SIMPLEST REACT FORM

    View Slide

  23. SIMPLEST REACT FORM

    View Slide

  24. REACT FORM DATA FLOW
    ▸ When you type into an input:
    ▸ onChange fires
    ▸ updates the internal state of the React component
    ▸ forces a re-render
    ▸ renders the input with the updated value
    WHY?

    View Slide

  25. CONTROL
    ▸ We have complete control over exactly what value each
    input will have.
    ▸ If we want to manipulate the value as someone types,
    we can do that. e.g. make all characters uppercase.
    ▸ We have one canonical source of information for the
    form values that we can trust.

    View Slide

  26. FLUX ARCHITECTURE

    View Slide

  27. REDUX

    View Slide

  28. WHAT IS REDUX?
    ▸ All your application state kept in a single store
    ▸ State is read-only
    ▸ Update the state by dispatching actions
    ▸ Actions are plain javascript objects
    ▸ State is mutated functionally via Reducers
    ▸ Subscribers are notified of changes only to their
    specific slice of the state

    View Slide

  29. WHY REDUX?
    ▸ Very easy to reason about your data flow
    ▸ Functional, easy to test the "reducers" that modify
    your state
    ▸ If something is displaying wrong, the state is
    wrong
    ▸ Easy to find exactly where the state got corrupted
    ▸ Excellent dev tools that allow time travel and
    replaying of actions

    View Slide

  30. FORMS
    ▸ One way data flow
    ▸ Update state on
    every change
    ▸ Rerender controlled
    inputs every change
    ▸ Maintaining state in
    components is full
    of boilerplate
    REDUX
    ▸ One way data flow
    ▸ Update state with
    dispatched actions
    ▸ Subscribed
    components rerender
    on changes to their
    slice
    ▸ Redux manages the
    broadcast of state
    changes

    View Slide

  31. WHAT IF...?

    View Slide

  32. REDUX-FORM
    INTRODUCING...
    http://redux-form.com

    View Slide

  33. SIMPLEST REACT FORM

    View Slide

  34. SIMPLEST REDUX-FORM

    View Slide

  35. SIMPLEST REDUX-FORM

    View Slide

  36. SIMPLEST REDUX-FORM

    View Slide

  37. SIMPLEST REDUX-FORM

    View Slide

  38. SIMPLEST REDUX-FORM

    View Slide

  39. SIMPLEST REDUX-FORM

    View Slide

  40. QUICK RECAP
    ▸ HTML Forms required all server rendering and
    processing
    ▸ jQuery and AJAX helped with form processing,
    but all state was still in the DOM inputs.
    ▸ Two-way binding with Angular and Ember
    provided a hybrid solution bridging the DOM and
    Javascript
    ▸ React introduced "controlled inputs" that ceded all
    control of data to Javascript.

    View Slide

  41. QUICK RECAP
    ▸ React "controlled inputs" require a lot of state
    updating boilerplate.
    ▸ Redux is excellent and managing state via
    functional reducers and replayable actions.
    ▸ Redux-Form marries Redux to React "controlled
    inputs" to manage all your form state in Redux, for
    fast form development and easy debugging.
    ▸ How fast is the development?

    View Slide

  42. LIVE CODING
    DEMO TIME

    View Slide

  43. REDUX FORM STATS
    ▸ First commit was July 31, 2015
    ▸ Over 2,900 stars on Github
    ▸ Version 6 was a complete rewrite to optimize for
    speed
    ▸ Version 6 will be released later this month
    ▸ Widely used in production apps around the globe
    ▸ Works with React Native

    View Slide

  44. REDUX FORM DOWNLOADS

    View Slide

  45. THE FUTURE

    View Slide

  46. THE FUTURE OF WEB FORMS
    ▸ Stateless DOM components
    ▸ Declarative UI
    ▸ Client side, application-wide, state management

    View Slide

  47. THANKS
    HAPPY CODING
    @erikras - Erik Rasmussen
    JSChannel 2016 - Bengaluru redux-form.com

    View Slide