lit-element-state-decoupler

A lightweight utility for state handling outside of the component for litelements.

The goal of this little tool is to allow you to decouple your business logic from your presentation.

For this, two functions are exposed:

useState
useReducer

The useState hook is a simple way to create a stateful object, the reducer allows you to create a handler for multiple actions.

When to use what?

State

Use it for simple internal component state changed in a single place, something you don't want to expose to consumer of the component via props. An example can be the <todo-add> component for this demo

Reducer

Use it for complex internal component state changed in multiple places, i.e. something which can be created, viewed, updated and deleted.

State

The useState hook is a simple mechanismn to manage your state. It makes it easy to handle single

Code

Reducer

While the useState hook can help you with small changes, as you can see in the todo app above it may lead to coupling your business logic with your presentation layer. To maintain that better, you might want to use the reducer instead.

Code

Reducer with custom events

The reducer can also be configured to dispatch `CustomEvent`s for the triggered actions. This allows you to easily bubble your changes up to the parent component, and manage your state even more easily.

lit-element-state-decoupler

When to use what?

State

Reducer

State

Code

Reducer

Code

Reducer with custom events

Code

Playground