is there a state management solution for lit-element?

Question

If there is a list which should be rendered from an array, and the array will be passed from the grand-grand-grand-grand-grand-parent custom element. That will be super annoying.

Is there a global state management solution for lit-element, just like redux?

Answer 1

LitElement is a library and you can use any library for state management that you want. Just subscribe to the store in the constructor or connectedCallback (unsubscribe in disconnectedCallback) and change the components' properties when the store notifies you of a change.

Here you have some PWA helpers that works with litElement and you have one for Redux.

https://github.com/Polymer/pwa-helpers#connect-mixinjs

Answer 2

Yes, check out LitState (npm package name lit-element-state).

I created this specially for LitElement. It has the same mindset: simple, small and powerful.

Because it is created specially for LitElement, it integrates very well and therefore the usage is very simple. You make a state object like this:

import { LitState, stateVar } from 'lit-element-state';

class MyState extends LitState {
    @stateVar() myCounter = 0;
}

export const myState = new MyState();

Usage without @decorators, look here.

Then you can use the state in your components like this:

import { LitElement, html } from 'lit-element';
import { observeState } from 'lit-element-state';
import { myState } from './my-state.js';

class MyComponent extends observeState(LitElement) {

    render() {
        return html`
            <h1>Counter: ${myState.counter}</h1>
            <button @click=${() => myState.counter++}></button>
        `;
    }

}

When you add the observeState() mixin to your component, the component will automatically re-render when any stateVar they use changes. You can do this with any amount of component and states and it will all automatically stay synchronized thanks to the observeState() mixin.

Answer 3

I am late in the game, but this can be quite usefull:

https://www.npmjs.com/package/@lit-app/state

@lit-app/state is a global state management, integrating with lit web-components.

Why a new state-management tool ?

There are plenty options available for state management, so why yet another one?

• Some existing options are too heavy. In my opinion, managing state should be lean and simple. Redux, for instance falls into this category.
• Some solutions designed for lit (for instance lit-state) do not support Typescript and do not take advantage of lit@2 Reactive Controlers, very well suited for hooking external features into templating lifecyce.
• Some elegant ideas were worth pursuing (for instance this tweet, or this post.

How to use it?

import { State, StateController, property } from "@lit-app/state";
import { LitElement } from "lit";

// declare some state
class MyState extends State {
  @property({value: 'Bob'}) name  
}
const myState = new MyState()

// declare a component
class StateEl extends LitElement {

  // StateController is a Reactive Controller binding myState with the element
  state = new StateController(this, myState)
  override render() {
    return html`
      <div>This will be updated when the state changes: ${myState.name}</div>
    `;
  }
}

// changing the state will reflect in the template
myState.name = 'Alice'

Answer 4

I'd look into MobX which is an extremely popular framework independent state management library

"MobX is unopinionated and allows you to manage your application state outside of any UI framework. This makes your code decoupled, portable, and above all, easily testable." - (Github)