5 key capabilities of easy-model (with real-world context)

Cleaner boundaries: logic stays inside models.
Better testability: DI is first-class.
Lower mental overhead: no container-first design.

#typescript #react #javascript #frontend

TL;DR

Model-first architecture, not store-first.
Instance caching by args for natural state partitioning.
Deep change watching across nested objects.
Hooks-friendly APIs for React.
Built-in IoC/DI for explicit dependencies.

The model-first shift

If you’ve ever felt your domain logic getting scattered across actions, reducers, selectors, and side-effect layers, easy-model is a reset. It keeps state and behavior together in a class model, then exposes a small Hooks API for React.

Example: sharing instances across components

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

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

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

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