DEV Community

Discussion on: How State Management works? Dead simple SM in Vanilla JavaScript

Collapse
 
artydev profile image
artydev

Thank you for your post.

Here is a variation :

const App =(function () {

  const State = {
    counter : 0
  }

  function render () {
    app.innerHTML = view ();
    return App
  }

  function incer () {
    State.counter += 1;
    App
      .render()
      .setupEvents();
  }

  function view () {
    return `
      <div>Counter ${State.counter}</div>
      <button class="counter">INC</button>
    `
  }

  function setupEvents () {
  let button = 
    document
      .querySelector(".counter")
      .addEventListener("click", App.incer)
  }

  return { render, incer, setupEvents }

})();

App
  .render()
  .setupEvents();

Enter fullscreen mode Exit fullscreen mode

You can test it here : SSM

Regards

Collapse
 
vijaypushkin profile image
Vijay Pushkin

This one is great. Makes better use of functional programming.