retate v0.0.3

retate

A simple state container for React Hooks

Wow

// counter.js
import retate from 'retate';

const counter = retate(0);

export const useCounter = counter.useStore;
export const dispatch = action => {
  if (action.type === 'add') {
    counter.set(state => state + 1)
  }
  
  if (action.type === 'remove') {
    counter.set(state => state - 1)
  }
  
  if (action.type === 'delay') {
    setTimeout(() => {
      counter.set(state => state + 10)
    })
  }
}

// view.js
import { useCounter, dispatch } from 'counter.js';

export const Btn = () => {
  return (
    <>
      <button onClick={() => dispatch({ type: 'add' })}>add</button>
      <button onClick={() => dispatch({ type: 'remove' })}>remove</button>
      <button onClick={() => dispatch({ type: 'delay' })}>delay</button>
    </>
  )
}

export const View1 = () => {
  const counter = useCounter();
  
  return (
    <div>{counter}</div>
  )
}

export const View2 = () => {
  const counter = useCounter();
  
  return (
    <div>{counter}</div>
  )
}

// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { View1, View2, Btn } from 'view.js'

const App = () => {
  return (
    <>
      <View1 />
      <View2 />
      <Btn />
    </>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));