easy-model in Action: 컴포넌트 간 통신, Watching, Async Loading – All in One Library

Source: Dev.to

Hey guys, state management in React can be a pain: Redux is heavy, Zustand too light, MobX has a learning curve. Today I’m sharing a balanced option: easy-model, a class‑based toolkit that simplifies state while adding IoC and watching. Let me show you some real‑world scenarios.

Scenario 1: Cross‑Component Communication (Instance Sharing)

Wrap your model class with provide to cache instances by args. Components with the same args share state:

import { useModel, provide } from "easy-model";

class CommunicateModel {
  constructor(public name: string) {}
  value = 0;
  random() {
    this.value = Math.random();
  }
}

const CommunicateProvider = provide(CommunicateModel);

function CommunicateA() {
  const { value, random } = useModel(CommunicateModel, ["channel"]);
  return (
    <>
      Component A: {value}
      <button onClick={random}>Change Value</button>
    </>
  );
}

function CommunicateB() {
  const { value } = useModel(CommunicateModel, ["channel"]);
  return <>Component B: {value}</>;
}

Changes in A update B instantly. Naturally supports “business key” partitioning.

Scenario 2: Fine‑Grained Watching (watch & offWatch)

Watch model changes while skipping fields for performance:

import { watch, offWatch, provide } from "easy-model";

class WatchModel {
  constructor(public name: string) {}
  value = 0;

  @offWatch
  internalCounter = 0; // Skip watching for perf

  increment() {
    this.value += 1;
    this.internalCounter += 1;
  }
}

const inst = provide(WatchModel)("demo");
const stop = watch(inst, (keys, prev, next) => {
  console.log(`${keys.join(".")}: ${prev} -> ${next}`);
});

inst.increment(); // Only logs value changes
stop();

Great for logging or external synchronization.

Scenario 3: Async Loading Management (loader & useLoader)

Unified loading states for async methods:

import { loader, useLoader, useModel, provide } from "easy-model";

class LoaderModel {
  constructor(public name: string) {}

  @loader.load(true)
  async fetch() {
    return new Promise(resolve =>
      setTimeout(() => resolve(42), 1000)
    );
  }
}

function LoaderDemo() {
  const { isGlobalLoading, isLoading } = useLoader();
  const inst = useModel(LoaderModel, ["demo"]);

  return (
    <>
      <div>Global Loading: {String(isGlobalLoading)}</div>
      <div>Method Loading: {String(isLoading(inst.fetch))}</div>
      <button onClick={inst.fetch} disabled={isGlobalLoading}>
        Load Data
      </button>
    </>
  );
}

Wrap‑Up

easy-model cuts down boilerplate and mental overhead. In my projects it simplified complex state logic and is perfect for structured apps.

Check it out:

What state libraries do you use? Ever tried class‑based ones? Share below!