Model allowed changes, not just stored fields

First, build a mental model

State is the information needed to decide what happens next. A transition maps the current state and an event to a next state. An invariant is a rule that must survive every accepted transition.

1. A state machine names meaningful states such as ready, playing and paused, then limits which events apply to each.
2. Validate an event before changing state so a rejected action cannot leave a half-updated object.
3. Derived values should be computed from their source when practical instead of maintained as conflicting copies.
4. An immutable update creates a new state value while preserving the old snapshot; it does not automatically freeze all nested data.
5. Presentation controls can guide a user, but an authoritative transition must still reject an invalid direct request.

function spendEnergy(state, cost) {
  if (state.phase !== 'playing' || cost < 1 || state.energy < cost) return state;
  return { ...state, energy: state.energy - cost };
}
const before = { phase: 'paused', energy: 5 };
const after = spendEnergy(before, 2);
console.log(after.energy);

1. Current state

   The game is paused with five energy units.

2. Requested event

   Spending two units is rejected because the phase is not playing.

3. Invariant

   The state remains unchanged, including its energy value of five.