[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.

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
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!

[samgates]

I'm coming from the React/Redux world and am doing a deep dive into web components. This video helped me wrap my head around state management with web components in exactly the way that I needed. Thanks for taking the time to record the video!

[justindb]

Note, anyone installing Mobx v6 will encounter issues. Anyone watching this and using Mobx v6 please make note of changes as the decorate function has been removed in v6:

Here is the modified sample code from this video, you just need to modify the store.js file:

import { observable, action, makeAutoObservable } from 'mobx';

class Store {

count = 0;

constructor() {
makeAutoObservable(this);
}

setTheme(theme){
this.theme = theme;
}

incrementCount() {
this.count = this.count + 1;
}
}

export const store = new Store();

** Note this works on "mobx": "^6.0.3" **

Again thanks for the video, I just had to review how to implement mobx in LitElement :)

[miklosnemeth]

How coincidental, I've just completed a PoC experimental app with 90% the same concepts as Yours, I was about to publish a video today, and this morning Youtube popped up your video. I have some extra features in my experimental, like styling Bootstrap in the Shadow DOM and I started with plain no-Lit version to show the progression. Excellent, video.

[DimitrisK]

This is an excellent introduction to state management, especially for people working on legacy code. I've been looking for a more structured way of introducing new complex screens on a jQuery, spaghetti internal tool, and I was stuck on how to handle state management without introducing a major framework and the full redux complexity. This video gave me more than I hoped for. Modular code with import statements, observables and data-binding, specific suggestions on where to put actions, clear design. I really like the unpkg convenience URLs, as well. Thank you for this!

[Oswee]

I would be really happy to see some reasonable pattern to handle UI state. Not component or application state but UI. Like... for example custom context-menu can be opened from any place in the tree. It should be at very top in body tag to avoid any z-index caveats. Then on some internal actions or click outside (no modal) it should be removed from the document. And so on. This is only one example. But there are dialogs, nested dialogs, sidebars, popups, modals, panels.. etc... and all that state should be somehow managed. If element X is presented in the dom then do this, else do that... and so on. Its easy if you have parent/child relationships. Just emit custom event and done. But with siblings it is bit unclear to me. Sure, i can handle that in Redux/Mobx.. but still... really curious to learn good patterns.

[StephanieCaulley]

Thank you for the video. I am new to Mobx (coming from the Redux world). Do you have any good suggestions on tutorials or best practices for setting up Mobx with a lit-element project - beyond your basic "hello world"?

[owaischunawala]

How do you select between XState and MobX for state management. Which according to you is better? Thank you for the video!

[justindb]

Thanks for the video, very helpful understanding how webcomponents and events work + adding state.

I'm a bit new to Webcomponents, but why do you have to write super.connectedCallback() in connectedCallback() ? In addition, can't you just remove the connectedCallback and instead use Lit-Elements built in lifecycle function "firstUpdated()" ?

[chaudharybilal]

What is this lit element can we use mobx in vanilla js with simple html without this lit element.?

[duechilidance]

Why is there so much oposition to web components, at least not wide adoption?