State management vanilla

by Kevin ALBRECHT

HTML

<body>
  <div>
    <ul id="resultat"></ul>
    <input id="firstname" type="text" value="" />
    <input id="lastname" type="text" value="" />
    <button id="validate" type="submit">Valider</button>
  </div>
</body>

JavaScript

var main = function () {
      var submitButton = document.getElementById("validate");
      var resultsHtml = document.getElementById("resultat");

      var currentFirstname = document.getElementById("firstname");
      var currentLastname = document.getElementById("lastname");

      var results = [];

      function init() {
        store.subscribe((newState) => {
          results = newState.persons;
          refreshResults();
        });

        submitButton.addEventListener("click", (e) => {
          //L'action
          var action = {
            type: "ADD_PERSON",
            newPerson: {
              firstname: currentFirstname.value,
              lastname: currentLastname.value
            }
          };

          store.dispatch(action);
        });
      }

      function refreshResults() {
        var resultsAsString = '';
        results.forEach((item) => {
          resultsAsString += `<li>${item.firstname} ${item.lastname}</li>`;
        });
        resultsHtml.innerHTML = resultsAsString;
      }

      return {
        init: init
      };
    }();

    var store = function () {
      //Le State
      var state = {
        persons: []
      };

      //subscribers
      var subscribers = [];

      //reducer
      function reducer(action) {
        switch (action.type) {
          case "ADD_PERSON":
            var currentPayload = action.newPerson;
            var newPayload = [...state.persons, currentPayload]
            // nouveau State
            return { persons: newPayload }
        }
        return state;
      }

      //getter
      function getState() {
        return state;
      }

      //notify
      function notify() {
        subscribers.forEach((sub) => {
          sub(getState());
        });
      }

      //subscribe
      function subscribe(fn) {
        subscribers = [...subscribers, fn];
        notify();
      }

      //dispatcher
      function dispatch(action) {
        state = reducer(action);
       ...