[Live Code Session] State Management in Web Components Explained

Hey Everyone! State management is one of those concepts that trips up a lot of people using web components. Let's make a basic counting application to illustrate the concept of sharing state between components.

Code: https://github.com/heyMP/hax-camp-mob...

By the end of this video you will understand:
What is local state
The challenge of local state between components
How to use the platform (i.e. javascript events) to share state
How to incorporate a central "store" to control application state
How MobX helps us manage the store and update components
How to use the mobx-lit element to easily update and render changes in our components

00:00 - Introduction
01:21 - Creating index.html and count-app element
05:30 - Introducing local state and adding count-toolbar
06:49 - Introducing state management conflict when adding increment count button in count-app
07:55 - Using the platform (i.e. javascript events) to share local state changes with other components

13:22 - Talk through some challenges with using only the platform to solve state management
15:05 - Refactor our statement using a central store and MobX.
21:00 - Updating count-app and count-toolbar using MobX autorun
23:00 - Debugging our refactor :)
24:10 - Explaining bug in our refactor and adding unidirectional data flow
25:05 - Disposing autorun functions
25:40 - Add reset count button to count-toolbar
27:25 - Centralizing logic by moving methods from components into the store
31:35 - Introducing action decorator in MobX
33:33 - Simplifying our code using the mobx-lit element
36:38 - Congrats, you've solved state management!