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

yarn

yarn add react-gstatem

Function component - Multiple stores

Rendered view

Store1
Clicked: 0 times
Store2
Clicked: 0 times

Recipes


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

Create store 1

FCMultiStore1
import { create } from "react-gstatem";

const { useSelect, dispatch } = create({ state: { count1: 0 } });

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

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

Create store 2

FCMultiStore2
import { create } from "react-gstatem";

const { useSelect, dispatch } = create({ state: { count2: 0 } });

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

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

Use the store in component

FCMultiStores
import React from "react";
import Counter from "./Counter";
import { useCount1, increaseCount1 } from "./FCMultiStore1";
import { useCount2, increaseCount2 } from "./FCMultiStore2";

const FCMultiStores = () => {
  const count1 = useCount1();
  const count2 = useCount2();

  return (
    <>
      Store1 <Counter value={count1} onIncrement={increaseCount1} />
      Store2 <Counter value={count2} onIncrement={increaseCount2} />
    </>
  );
};

export default FCMultiStores;