dojo2-stateful

A simple state lib for Dojo inspired by Unstated. Check out this simple codesandbox.

How do I use this package?

npm install dojo-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 renderer from '@dojo/framework/widget-core/vdom';
import Registry from '@dojo/framework/widget-core/Registry';
import WidgetBase from '@dojo/framework/widget-core/WidgetBase';
import { w, v } from '@dojo/framework/widget-core/d';
import { createStatefulProvider, Container, Subscribe } from 'dojo-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 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 r = renderer(() => w(Counter, {});
r.mount({ registry });