jstates_react_simple _example

jstates_react_simple_example.js

import { createState, subscribe, useSubscribe } from "jstates-react";

const counterState = createState({ counter: 0 });

const addOne = () => counterState.setState(state => ({ counter: ++state.counter }));
const removeOne = () => counterState.setState(state => ({ counter: --state.counter }))

function Counter() {
  return (
    <>
      <button onClick={addOne}>add one +</button>
      <button onClick={removeOne}>remove one -</button>
    </>
  );
}

// with useSubscribe hook
function App() {
  const { counter } = useSubscribe(counterState);
  return (
    <div>
      <p>Current counter: {counter}</p>
      <Counter />
    </div>
  );
}
 
export default App;

// with HOC subscribe function
function App({ counter }) {
  return (
    <>
      <p>Current counter: {counter}</p>
      <Counter />
    </>
  );
}

const mapStates = (counterState) => ({
  counter: counterState.counter
});

export default subscribe(App, counterState, mapStates);