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

7e86f7e41168df55b65e30cdda423e10?s=128

Erik Rasmussen

July 16, 2016
Tweet

Transcript

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

    2016 - Bengaluru
  2. HTML FORMS

  3. JAVASCRIPT COMES TO FORMS

  4. AJAX ASYNCHRONOUS JAVASCRIPT AND XML

  5. THE AGE OF JQUERY

  6. THE AGE OF JQUERY

  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?
  8. TWO WAY BINDING

  9. TWO WAY BINDING

  10. REACT

  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
  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.
  13. SIMPLEST REACT FORM

  14. SIMPLEST REACT FORM

  15. SIMPLEST REACT FORM

  16. SIMPLEST REACT FORM

  17. SIMPLEST REACT FORM

  18. SIMPLEST REACT FORM

  19. SIMPLEST REACT FORM

  20. SIMPLEST REACT FORM

  21. SIMPLEST REACT FORM

  22. SIMPLEST REACT FORM

  23. SIMPLEST REACT FORM

  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?
  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.
  26. FLUX ARCHITECTURE

  27. REDUX

  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
  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
  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
  31. WHAT IF...?

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

  33. SIMPLEST REACT FORM

  34. SIMPLEST REDUX-FORM

  35. SIMPLEST REDUX-FORM

  36. SIMPLEST REDUX-FORM

  37. SIMPLEST REDUX-FORM

  38. SIMPLEST REDUX-FORM

  39. SIMPLEST REDUX-FORM

  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.
  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?
  42. LIVE CODING DEMO TIME

  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
  44. REDUX FORM DOWNLOADS

  45. THE FUTURE

  46. THE FUTURE OF WEB FORMS ▸ Stateless DOM components ▸

    Declarative UI ▸ Client side, application-wide, state management
  47. THANKS HAPPY CODING @erikras - Erik Rasmussen JSChannel 2016 -

    Bengaluru redux-form.com