История x, моего Redux чистого JS без наполнителя и убийц

Я погружаюсь в React с Redux.
Я всегда попадаю в ловушку, пытаясь пропустить основы.
Я всегда выбираю трудный путь.
Вы никогда не можете пропустить основы.
Я не понимаю, почему они ставят самое необходимое перед основами, но мне следовало бы знать лучше.

Вот история x, моего Redux, чистого JS, без наполнителя и убийц:

<!DOCTYPE html>
<html>
  <hread>
    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
  </hread>
  <body>
    <p id="xValueDisplay"></p>
    <input id="xValueInput" />
    <button id="xValueSetter">Set</button>
    <script>
      // the UI
      const xValueDisplayEl = document.getElementById('xValueDisplay');
      const xValueInputEl = document.getElementById('xValueInput');
      const xValueSetterEl = document.getElementById('xValueSetter');

      // the initial state of the reducer
      const appInitialState = {
        x: 'change me'
      }

      // the reducer
      function appReducer(state = appInitialState, action) {
        switch (action.type) {
          case 'x/wasSet':
            return { ...state, x: action.payload};
          default:
            return state;
        }
      }

      // the store
      const appStore = Redux.createStore(appReducer);

      // the UI renderer
      function appRender() {
        const state = appStore.getState();
        xValueDisplayEl.innerHTML = state.x;
        xValueInputEl.value = state.x;
      }
      // first render with the state of the store
      appRender();
      // subscribe the renderer to the store updates
      appStore.subscribe(appRender);

      xValueSetterEl.addEventListener('click', function() {
        // we dispatch the x/wasSet action to change store state
        appStore.dispatch({ type: 'x/wasSet', payload: xValueInputEl.value });
      });
    </script>
  </body>
</html>

Вход в полноэкранный режим Выход из полноэкранного режима