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
• Model
• Class Components
• Create Local Store

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

---