[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-mobx-demo 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!