gstatem-devtools

The DevTools helpers for gstatem and react-gstatem.

Installation

npm

npm i gstatem-devtools

yarn

yarn add gstatem-tools

Demos

Usage

The increaseCount function can be used anywhere - in component, utils file, event listener, setTimeout, setInterval and promise callbacks.

Create a store with Devtools

// Store.js
import { create } from "react-gstatem";
import DevTools from "gstatem-devtools";

const { useSelect, dispatch } = create(
  new DevTools({ 
    /* initial state */
    state: { count: 0 } 
  })
);

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

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

Use in component

import React from "react";
import Counter from "./Counter";
import { useCount, increaseCount } from "./Store";

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

export default BasicUsage;

Every dispatched piece will be logged in the Chrome extension GStatem-DevTools if the devtools is installed.