Event sourcing in frontend

Summary

Append-only event log as source of truth; UI derives state by folding events — enables undo, replay, audit, time-travel debug. Heavier than CRUD state; fits collaboration, editors, complex wizards. Snapshot periodically for performance. Not every app needs it — cost vs benefit.

Code example

function eventsReducer(events, action) {
  switch (action.type) {
    case 'APPEND':
      return [...events, action.payload];
    case 'UNDO':
      return events.slice(0, -1);
    default:
      return events;
  }
}

const state = events.reduce(eventsReducer, []);

Key points

• Append-only event log as source of truth; UI derives state by folding events — enables undo, replay, audit, time-travel debug.
• Heavier than CRUD state; fits collaboration, editors, complex wizards.
• Snapshot periodically for performance.
• Not every app needs it — cost vs benefit.

Further reading

• Reducer patterns
• useReducer

Related concepts

• Finite state modeling
• Optimistic UI rollback strategy