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

setState Machine

setState Machine

What if your components' state was deterministic?
Learn about the implementation of State Machines to manage React Components' state - from the basics of Automata theory to autogenerated tests.

Michele Bertoli

April 13, 2018
Tweet

More Decks by Michele Bertoli

Other Decks in Programming

Transcript

  1. Infinite Scroll • Attach an event handler to scroll •

    Check if the user scrolled > 90% • Fetch more data
  2. {isEmpty ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>) : <div style={{

    opacity: isFetching ? 0.5 : 1 }}> <Posts posts={posts} /> </div> } source: github.com/reactjs/redux
  3. “A statechart is a magic-box: you tell it what happened,

    and it tells you what to do.” Luca Matteis, 2018
  4. start entry attach listening SUCCESS [hasMore] ERROR / error SCROLL

    [scrollPercentage > 0.9] READY fetching entry fetch finish SUCCESS [!hasMore] entry detach
  5. start entry attach listening finish SUCCESS [!hasMore] SUCCESS [hasMore] ERROR

    / error SCROLL [scrollPercentage > 0.9] READY fetching entry fetch entry detach
  6. start entry attach READY SUCCESS [hasMore] listening finish SUCCESS [!hasMore]

    ERROR / error SCROLL [scrollPercentage > 0.9] fetching entry fetch entry detach
  7. ERROR / error SUCCESS [!hasMore] SUCCESS [hasMore] entry fetch fetching

    READY start entry attach listening finish SCROLL [scrollPercentage > 0.9] entry detach
  8. fetch() { const { transition } = this.props loadData() .then(data

    => transition('SUCCESS', data) .catch(() => transition('ERROR')) }
  9. Constructing the User Interface with Statecharts Ian Horrocks, 1998 bit.ly/statecharts-book

    Statecharts: A Visual Formalism for Complex Systems David Harel, 1987 bit.ly/statecharts-paper