react-state-model

Hooks State Managment

Usage no npm install needed!

<script type="module">
  import reactStateModel from 'https://cdn.skypack.dev/react-state-model';
</script>

README

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>
  );
};