Nostradamus Prophecy Machine

    react-state-model

    0.0.1 • Public • Published

    NPM

    install size dependencies

    react-state-model

    Easy state management with models for react & react-native using hooks. It's useful for global state management and complex components local state

    TOC

    Install

    npm i react-state-model --save
    yarn add react-state-model

    Model

    import { model, createHooks } from "react-state-model";
     
    const initialState = {
      counter: 0,
    };
     
    const getActions = (setState, self) => ({
      increase() {
        setState({ count: self.count + 1 });
      },
      decrease() {
        if (self.count <= 0) return;
     
        setState({ count: self.count - 1 });
      },
    });
     
    const Store = model(initialState, actions).create();
    const useGlobal = createHooks(Store);
     
    const App = () => {
      return (
        <div>
          <button type="button" onClick={Store.decrease}>
            Decrease
          </button>
          <button type="button" onClick={Store.increase}>
            Increase
          </button>
          <OtherComp />
        </div>
      );
    };
     
    const OtherComp = () => {
      const store = useGlobal(["counter"]);
      return <p>Count:{store.counter}</p>;
    };

    Class

    if you want to use store in class component follow this approach

    class TestComponent extends Component {
      componentDidMount() {
        this.unsubscribe = addListener(Store, () => this.forceUpdate());
      }
      componentWillUnmount() {
        this.unsubscribe.remove();
      }
      render() {
        return (
          <p onMouseEnter={Store.increase} onMouseLeave={Store.decrease}>
            {Store.count}
          </p>
        );
      }
    }

    useLocalStore

    Use this instead of useReducer

    import { useLocalStore } from "react-state-model";
     
    const Store = model(
      {
        count: 0,
      },
      (setState, self) => ({
        increase() {
          setState({ count: self.count + 1 });
        },
      }),
    );
     
    const App = () => {
      const store = useLocalModel(Store);
     
      return (
        <div>
          <p>
            Count:
            {store.counter}
          </p>
          <button type="button" onClick={store.increase}>
            Increase
          </button>
        </div>
      );
    };

    Install

    npm i react-state-model

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    ISC

    Unpacked Size

    13.5 kB

    Total Files

    16

    Last publish

    Collaborators

    • hosseinmdeveloper