#useStoreExample #useStore

useStore.js

/* eslint-disable no-unused-vars */
import React from 'react';
import './styles.css';
import {useStore} from './useStore';

let log = console.log;

export default function App() {
  const [home, setHome] = useStore('home', 10);
  const [kitchen, setKitchen] = useStore('kitchen', 200);

  // log('i got =>', {state, setState: setState.toString()});
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      stateHome: {home} <br />
      stateKitchen: {kitchen} <br />
      <button
        onClick={() => {
          setHome(home + 1);
        }}
      >
        Increment stateHome
      </button>
      <button
        onClick={() => {
          setKitchen(kitchen + 1);
        }}
      >
        Increment stateKitchen
      </button>
      <br />
      <button
        onClick={() => {
          setHome((state) => state + 2);
        }}
      >
        Increment stateHome by 2
      </button>
      <button
        onClick={() => {
          setKitchen((state) => state + 2);
        }}
      >
        Increment stateKitchen by 2
      </button>
      <hr />
      <ChildComponent />
    </div>
  );
}

const ChildComponent = () => {
  const [home, setHome] = useStore('home');
  const [kitchen, setKitchen] = useStore('kitchen');

  return (
    <div>
      <h4>Child Component</h4>
      stateHome: {home} <br />
      stateKitchen: {kitchen} <br />
      <button
        onClick={() => {
          setHome(home + 1);
        }}
      >
        Increment stateHome
      </button>
      <button
        onClick={() => {
          setKitchen(kitchen + 1);
        }}
      >
        Increment stateKitchen
      </button>
      <br />
      <button
        onClick={() => {
          setHome((state) => state + 2);
        }}
      >
        Increment stateHome by 2
      </button>
      <button
        onClick={() => {
          setKitchen((state) => state + 2);
        }}
      >
        Increment stateKitchen by 2
      </button>
    </div>
  );
};