easy-model 实战：跨组件通信、监听与异步加载——一站式库

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.

场景 1：跨组件通信（实例共享）

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.

场景 2：细粒度监听（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.

场景 3：异步加载管理（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>
    </>
  );
}

总结

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!