GStatem is a small, simple and fast state-management tool.

Installation

npm

npm i react-gstatem

yarn

yarn add react-gstatem

Demos

Basic usage of function component

Create a store

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

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

const { useSelect, dispatch } = create({
  /* 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 the store 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;