Cheatsheet request: unstated

[vincentaudebert]

unstated is a cool state manager based on the new Context API with a polyfill for older React versions.
More info here: https://github.com/jamiebuilds/unstated

Container:

import { Container } from 'unstated';

type 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 });
  }
}

Subscribed Component:

import { Subscribe } from 'unstated';
const Counter = () => {
  return (
    <Subscribe to={[CounterContainer]}>
      {counter => (
        <div>
          <button onClick={() => counter.decrement()}>-</button>
          <span>{counter.state.count}</span>
          <button onClick={() => counter.increment()}>+</button>
        </div>
      )}
    </Subscribe>
  );
}

Provider Component:

import { Provider } from 'unstated';
const ProviderComponent = () => {
  return (
    <Provider>
      <Counter />
    </Provider>
  );
}