Avoiding state in simple incrementer

Question

I'm trying to wrap my head around avoiding state using JavaScript functional programming techniques. I have a solid grasp of many basic fp techniques such as closures, currying, and so on. But I can't wrap my head around dealing with state.

I'd like to know how someone creating a functional program would implement the following very simple application:

A user clicks a button in the browser (jQuery implementation is fine). The value onscreen should increment by 1 each time the user clicks the button.

How can we do this without mutating state? If mutating state is necessary, what would be the best approach from a functional perspective?

Answer 1

As you can see, a counter in non-fp mode is simply stateful. It holds the state so that can increment or decrement it accordingly to their api.

const createCounter = () => {
  let value = 0;
  
  return {
    get value() {
      return value;
    },
    increment() {
      value = value + 1;
    },
    decrement() {
      value = value - 1;
    },
  };
};


const counter = createCounter();
console.log('initial value', counter.value);

counter.increment();
counter.increment();
console.log('value after two increments', counter.value);


counter.decrement();
console.log('value after one decrement', counter.value);

The functional way of building a counter is to let the consumer provide the state. The functions only know how to mutate it:

const incrementCounter = counter => counter + 1;
const decrementCounter = counter => counter - 1;

const value = 0;
console.log('initial value', value);

const valueAfterTwoIncrements = incrementCounter(
  incrementCounter(value),
);

console.log('value after two increments', valueAfterTwoIncrements);


const valueAfterOneDecrement = decrementCounter(valueAfterTwoIncrements);

console.log('value after one decrement', valueAfterOneDecrement);

The advantages of this approach are almost countless, functions are pure and their output deterministic so testing is very easy etc.

---

Q&A:

1. "Let the consumer provide the state": The functions (inc/dec) don't work with their own state, they take it as argument and return a new version of it. Try to think of a redux reducer, they only embed the logic to change the state... but ultimately, the state is passed as argument.
2. "where the values continue to get incremented/decremented": The state do never change, this is called immutability, the pure functions will always return a new copy of it so that if you want you have to store it somewhere else.

   ---

Working with the DOM

Separate View Layer from the actual Business Logic Layer

As you can see on the following example, the view is data-unaware, the dom is only used to render or trigger ui events, while the actual business logic (current state value and how to inc/dec) is being held on a different and well separated layer. The orchestration layer is ultimately used to bind those two layers together.

/***** View Layer *****/
const IncBtn = ({ dispatch }) => {
  dispatch({ type: 'INC' });
};

const DecBtn = ({ dispatch }) => {
  dispatch({ type: 'DEC' });
};

const Value = ({ getState }) => {
  document.querySelector('#value').value = getState();
};


/***** Business Logic Layer *****/
const counter = (state = 0, { type }) => {
  switch(type) {
    case 'INC':
      return state + 1;
      
    case 'DEC':
      return state - 1;
    
    default:
      return state;
  }
};


/***** Orchestration Layer *****/
const createStore = (reducer) => {
  let state = reducer(undefined, { type: 'INIT' });
  
  return {
    dispatch: (action) => {
      state = reducer(state, action);
    },
    getState: () => state,
  };
}


(() => {
  const store = createStore(counter);
  // first render
  Value(store);
  
  document
    .querySelector('#inc')
    .addEventListener('click', () => {
      IncBtn(store);
      
      Value(store);
    });
  
  document
    .querySelector('#dec')
    .addEventListener('click', () => {
      DecBtn(store);
      
      Value(store);
    });
})();

<button id="inc">Increment</button>
<button id="dec">Decrement</button>
<hr />

<input id="value" readonly disabled/>

Answer 2

Here is how you would implement a simple counter app without mutating anything except for the DOM.

const h1 = document.querySelector("h1");

const [decrement, reset, increment] = document.querySelectorAll("button");

const render = count => {
    h1.innerHTML = count; // output
    decrement.onclick = event => render(count - 1); // -+
    reset.onclick     = event => render(0);         //  |-- transition functions
    increment.onclick = event => render(count + 1); // -+
};

render(0);
//     ^
//     |
//     +-- initial state

<h1></h1>
<button>-</button>
<button>Reset</button>
<button>+</button>

This is an example of a Moore machine. A Moore machine is a finite-state machine. It consists of three things.

1. The initial state of the machine. In our case, the initial state is 0.
2. A transition function, which given the current state and some input, produces a new state.
3. An output function, which given the current state, produces some output.

In our case, we combined the transition function and the output function into a single render function. This is possible because both the transition function and the output function require the current state.

When the render function is provided the current state, it produces some output as well as a transition function which when provided some input, produces a new state and updates the state machine.

In our case, we divided our transition function into multiple transition functions which share the current state.

---

We can also use event delegation to improve performance. In the example below we only register one click event listener on the entire document. When the user clicks anywhere in the document, we check whether the target element has an onClick method. If it does, we apply it to the event.

Next, in the render function instead of registering separate onclick listeners for each button, we store them as regular methods named onClick (different case). This is more performant because we're not registering multiple event listeners, which would slow down the app.

const h1 = document.querySelector("h1");

const [decrement, reset, increment] = document.querySelectorAll("button");

const render = count => {
    h1.innerHTML = count;
    decrement.onClick = event => render(count - 1);
    reset.onClick     = event => render(0);
    increment.onClick = event => render(count + 1);
};

render(0);

document.addEventListener("click", event => {
    if (typeof event.target.onClick === "function") {
        event.target.onClick(event);
    }
});

<h1></h1>
<button>-</button>
<button>Reset</button>
<button>+</button>