import React from 'react';
import {createActionPlug} from 'react-action-plug';

// Define action plug
type MyActions = {
  increment(n: number): void;
  reset(): void;
};
const {Boundary, useActionHandlers, useActions} = createActionPlug<MyActions>();

function Counter() {
  const [count, setCount] = React.useState(0);
  // Prepare action handlers to do something
  useActionHandlers({
    increment(n: number) {
      setCount(count => count + n);
    },
    reset() {
      setCount(0);
    }
  });

  return (
    <div>count: {count}</div>
  );
}

function Controller() {
  const {increment, reset} = useActions();
  return (
    <>
      {/* Trigger "increment" action when click */}
      <button onClick={() => increment(1)}>click!</button>
  
      {/* Trigger "reset" action when click */}
      <button onClick={() => reset()}>reset</button>
    </>
  );
}

function App() {
  // Wrap with Boundary component, which specifies the scope of the actions and those handlers.
  return <Boundary>
    <Controller />
    <Counter />
  </Boundary>;
}

type Actions = {
  increment(): void;
}
const {Boundary, useActions, useActionHandlers} = createActionPlug<Actions>();

function MyComponent() {
  const [state, setState] = useState(0);
  useActionHandlers({
    increment() {
      setState(count => count + 1);
    }
  });

  return <div>count: {state}</div>;
}

function MyController() {
  const actions = useActions();
  const handlerClick = () => {
    actions.increment();
  };

  return <div onClick={handleClick}>increment</div>;
}

const {Boundary, useActions, useActionHandlers} = createActionPlug<{/* ... */}>();

function Container() {
  return (
    <Boundary>
      <Controller />
      <Counter />
    </Boundary>
  );
}