dojo2-stateful

dojo2-stateful

A simple state lib for Dojo 2 inspired by Unstated.

How do I use this package?

npm install dojo2-stateful

Features

Simple state mechanism that enables sharing state across your application widget tree without needing to introduce complex state management.

Simple Counter Example:

import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
import Registry from '@dojo/widget-core/Registry';
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { w, v } from '@dojo/widget-core/d';
import { createStatefulProvider, Container, Subscribe } from 'dojo2-stateful';


interface CounterState {
	count: number
};

class CounterContainer extends Container<CounterState> {
	state = {
	  count: 0
	};

	increment = () => {
	  this.setState({ count: this.state.count + 1 });
	}

	decrement = () => {
	  this.setState({ count: this.state.count - 1 });
	}
}

class Counter extends ProjectorMixin(WidgetBase) {
	protected render() {
		return w(Subscribe, { to: [CounterContainer], render: (counter: CounterContainer) => {
			return v('div', [
				v('button', { onclick: counter.decrement }, [ 'Decrement' ]),
				v('span', [ `${counter.state.count}` ]),
				v('button', { onclick: counter.increment }, [ 'Increment' ])
			])
		}})
	}
}

const registry = new Registry();
// create state provider for the registry
createStatedProvider(registry);

const counter = new Counter();
counter.setProperties({ registry });
counter.append();