coffee-cup

import * as React from "react";
import { state, watch, dispatch } from "./model";
import { increaseCount, decreaseCount } from "./actions";

export const App = () => (
  <div>
    <button onClick={() => dispatch(decreaseCount)()}>-</button>
    <h1>Count: {watch(state.count)}</h1>
    <button onClick={() => dispatch(increaseCount)()}>+</button>
  </div>);

coffee-cup

import { state } from "./model";

const increaseCount = () => {
  state.count++;
};

const decreaseCount = () => {
  state.count--;
};

coffee-cup

import { model } from "./model";

const { Provider } = model.createStore({
  initState: {
    count: 0,
  },
});

coffee-cup

// src/model.ts
import { createModel } from "@prodo/core";

interface State {
  count: number;
}

export const model = createModel<State>();
export const { state, watch, dispatch } = model.ctx;

coffee-cup

import * as React from "react";
import { useOvermind } from "./overmind";

const Counter: React.FC = () => {
  const { state, actions } = useApp();
  return (
    <div className="App">
      <h1>{state.count}</h1>
      <button onClick={() => actions.decreaseCount()}>decrease</button>
      <button onClick={() => actions.increaseCount()}>increase</button>

coffee-cup

// src/overrmind/index.ts
export const config = {
  state: { /* ... */ },
  actions: { /* ... */ }
}

export const useOvermind = createHook<typeof config>()

coffee-cup

import { Action } from './overmind'

export const noArgAction: Action = (context, value) => {
  value // this becomes "void"
}

export const argAction: Action<string> = (context, value) => {
  value // this becomes "string"
}

coffee-cup

// src/overmind/index.ts
import {
  IConfig,
  IOnInitialize,
  IAction,
  IOperator,
  IDerive,
  IState
} from 'overmind'

coffee-cup

// src/overmind/index.ts
import { IConfig } from 'overmind'

const config = {
  state: {
    count: 0
  },
  actions: {
    increaseCount({ state }) {
      state.count++;

coffee-cup

import * as React from "react";
import { useStore } from "../store";

const MyComponent = observer((props: Props) => {
  const store = useStores();

  return (/* ... */;
});