Simple Counter

Use state to create a simple counter component

Create CounterSink

Sink states maps dispatch automatically to the component. so you don't have to create action or reducer.

CounterSink.js

import { state, sink } from 'redux-sink';

@sink('counter')
export class CounterSink {
  @state value = 0;
}

Use external state without dispatches

Counter.jsx

import { useSink } from 'redux-sink';
import { CounterSink } from './counter-sink';

export const Counter = () => {
  const counter = useSink(CounterSink);

  return (
    <div>
      <p>count: {counter.value}</p>
      <button onClick={() => counter.value++}>plus</button>
      <button onClick={() => counter.value--}>minus</button>
    </div>
  );
}

The two-way update for the state is based on defineProperty, so when updating object or array you still need to update the whole object reference. For example Object.assign or Array.contact