No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Installation
npm
npm i react-gstatem gstatem-devtools
yarn
yarn add react-gstatem gstatem-devtools
Function component - With DevTools
Rendered view
Clicked: 0 times  
Recipes
Create a store
The increaseCount and resetCount functions can be used anywhere - in component, utils file, event listener, setTimeout, setInterval and promise callbacks.
FCStoreWithDevTools
import { create } from "react-gstatem";
import DevTools from "gstatem-devtools";

const initialState = { count: 0 };
const { useSelect, dispatch } = create(
  new DevTools({
    /* optional, will be displayed as store id in DevTools */
    id: "fc-store-with-devtools",
    state: initialState
  })
);

/* select count hook for function component */
export const useCount = () => useSelect(state => state.count);

/* increase the counter */
export const increaseCount = () =>
  dispatch(state => ({ count: state.count + 1 }));

/* reset counter */
export const resetCount = () => dispatch(initialState);
Use the store in component
FCWithDevTools
import React from "react";
import Counter from "./Counter";
import { increaseCount, resetCount, useCount } from "./FCStoreWithDevTools";

const FCWithDevTools = () => {
  const count = useCount();
  return (
    <Counter value={count} onIncrement={increaseCount} onReset={resetCount} />
  );
};

export default FCWithDevTools;
Every dispatched piece will be logged in the Chrome extension GStatem-devtools if the devtools is installed.
devtools