Reclare counter example

Simple counter example for Reclare and React-Reclare More on https://github.com/reclarejs/reclare

HTML

<script src="https://unpkg.com/reclare@latest"></script>
<script src="https://unpkg.com/react-reclare@latest"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  text-align: center;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

React

/**
* This is a simple counter example for Reclare. The rule
* of this counter is the counter should not go below zero.
*/

const { createContext, broadcast } = Reclare;
const { connect, ReclareProvider } = ReactReclare;

// Buttons
const Buttons = props => (
	<div className="buttons">
    <input
      type="button" value="+"
      onClick={() => broadcast('increment')}
    />
    <input
      type="button" value="-"
      onClick={() => broadcast('decrement')}
    />
  </div>
);

// Connected Counter component
const Counter = props => <div>{props.counter}</div>;
const CounterConnected = connect(state => ({ counter: state.counter }))(Counter);


// create Reclare context
const ctx = createContext({
  initialState: { counter: 0 },
  onEvent: [
    {
      on: 'increment',
      reducer: ({ state }) => ({ ...state, counter: state.counter + 1 }),
      reaction: ({ state }) => console.log(`Incremented to ${state.counter}`)
    },
    {
      on: 'decrement',
      when: ({ state }) => state.counter > 0,
      reducer: ({ state }) => ({ ...state, counter: state.counter - 1 }),
      reaction: ({ state }) => console.log(`Decremented to ${state.counter}`)
    },
    {
      on: 'decrement',
      when: ({ state }) => state.counter <= 0,
      reaction: () => alert('Counter already at zero')
    }
  ]
});

// Root component wrapped with Reclare Provider
const ReclareDemo = props => (
  <ReclareProvider context={ctx}>
    <CounterConnected />
    <Buttons />
  </ReclareProvider>
);


ReactDOM.render(<ReclareDemo />, document.querySelector("#app"));