Using Mergerino to manage states in MVC applications
Tags: mvc, javascript
Published: 2024-04-12 07:28:46

MVC is an old efficient pattern, but it can beneficiate of some utilities used in reactive libraries.

Among those utilities, there is Mergerino, which helps to update complex objects (states);

Here is a [Demo](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHTTYB4ATCANwAIIXALwsQGAA4SxAPjb9+HOBIxoZHAPTLVctJp69dnAEYBXYsXr9qUDHDiiQx4uxC6FASQByAYU4azC3oZShA4GFhqYgh6BEQQAA5EAE4QAF8KdGxceJwAJwBzGDyINFp8ACsEKjoGJmI8DQ1+DywJWjzifgBZYqKSsrZauC6YYQB5YwqYKPw7OAgCtAAfZYAKNZgKYgBKYRk14gAyI8np2YBrGABPOEOd-DAOgFEMakI12n2YZFoAXWExF+fx2FBgO1BxGEmwoeQocD2MmAwy61EB1wkMFoYH4cAA3BAwGs4CcxLQpjNiGJhDTqDtCWsAIJ5PIYa74CBwZms67EiFPPJrFH8WginEIvKAmFw2g7PERcL8AVC2KosX8M6U-BXW58nbI1VK4RwZDUP54sRgUxoKIxVw04gYrE4sAAfjypoBRI9ZoossQvFoQn4AAYacI3TATgBCTleDBeIU7d34ZRQCDUGBCigARh2iC4ERgjH4Pr+iDQpigUHDYFWZIpUTE0fRmOxStW3LZHK5LLZazAybLEcQDfOVJADqd7bL7s9EfDs7AiFoazLFEHiGHxDW0ZzmQyg7SCpgluttvo1NpJzXxrXfoheLyxdMeTQpYyX0+FHwv7yiINNARlxYQu3ZTkwM+OVn2IV93x3OB4Vdco4HTTM1nzLNgE-UF-zSC0bUNfIin4YQRQItgYAAD3aToFGAfhiJgfg0lCcJImiWI8AAFkQHMAHZ0kyEBMBwPBKmqGh6EYZh4ggNoOi6BimJYpU8loLB+DEfANCYgZyiqMQ2CGQ0Ii6MjiSLKIOh2UiZH4LhaGoUwcAYfAAEdTGKa4AGUrMsQV2MpGyCK0wigK6HziAwEsyOAeQFDoa1iEQUMwrSMKwpseYeloQsoH4eL30ylE8lMazBVKCBogwKAopi5iyPqktbKKhQFGIQhOVTaLYsENBqogWrmpgUK0nkeQimIEaMMKhKFBguD+E67qRgasbjPfUwJC4BqZpUYh3la+blq6uAeoa0jGL6LMVvOtbGAofgDqOja0HG9gbVsex+AANQgGAAHc5uK+RSvKgKVQYdTq2KY7io6s65ikK6zLWMQAGJJGkEA5ROu78CSuo8lRqAd0x7HcRUVw8YR07utqYgYdgEmyMZ5nilC9qCdKTNWf4NHtOcGmucR7reeKOYuC4Z5eHqAAZTkZOKdGaDQi4xCe2b9np872doWG8g5G0MNpljNtLJhC0FXbovh9rdcJ2hksl0o0GKAAVajzIcmKMCd5K3o+zbsp+nxpI5km2vBiq1l4AHAaerA8oie3uaR+OgauzPAdFx3k-yq6C4iN75F52a2vapp+AAVUVDBnpi95ltFbbbeYzrmIe086YJ4uoHwNu9t6rDrGdhhUr7lOB6mmaHiJroAGp+BzFizfT7qc-wZ80Gtw4kf7-BZ5H02g826uPAGmr0wALxiu0TIixjp6u93ge6aeMII4V9cN1+s-DtDA2LM1iVmrEnaetNhQ53-sDf6QMoZM2AXDb+EdkFGxgWRHOFE0DVy9iMOAbArQ2k4vBeAxA7j2y3jvPeh9j4NVPmwYOdQCFfzYGxfydo4ggG4gAJkQLwgAzEJLIYl4iE3sKERm9Q8DpD+FQUSOQQDdF+j4cOLs8i9EKMUUotB0hAA)

```js
import { merge } from "./mergerino.js"

const elt = (selector) => document.querySelector(selector);
 
const State = {
   count: 0 
} 
 
class Model {
  
 constructor(initialState = State ) {
    this.state = initialState;
 }
 
 getState() {
    return this.state;
 }

 updateState(patch) {
    this.state = merge(this.state, patch);
 }
}

class View {
  
 constructor(controller) {
    this.app = elt("#app");
    this.counter = elt("#app span");
    this.controller = controller;
    this.incer = elt(".btn");
    this.incer.addEventListener("click", () => this.controller.inc());
 }

 render(data) {
    this.counter.innerText = data.count;
 }
}


class Controller {
 constructor(view, model) {
    this.view = view;
    this.model = model;
 }

 inc() {
    // Use a patch to update the state
    this.model.updateState({ count: this.model.getState().count + 1 });
    this.view.render(this.model.getState());
 }
}

// Initialization
const model = new Model();
const controller = new Controller(null, model);
const view = new View(controller);
controller.view = view;

// Tests
function tests() {
 view.render(model.getState());
}

tests();
```