How to Manage Active Views, Popups, and View History in Large SPAs Using ReactJS Redux Toolkit

In large-scale SPAs like diagramming tools or applications, managing views, popups, and view history can become a tangled mess. In this post, I’ll walk through a clean and scalable way to handle these using Redux Toolkit, focusing on: activeView with dynamic metadata popupStack for handling layered modals history for potential undo/redo or view back-navigation Why Not Just use React State or Context? React state is fine for small components, but doesn't scale for shared view state across dozens of components. Redux provides a centralized, predictable, and testable structure for view transitions, modal handling, and history tracking. Core State Structure activeView: Keeps track of the current view (e.g., Workspace, Project, Floor). meta: Contains dynamic data like isDirtyView, selected_project, or map polygons. popupStack: Works like a call stack to layer modals/popups. history: Stores previous views for easy backward navigation or undo. View Transitions with History Support This lets you: Skip history if needed (e.g., for internal refresh). Merge new metadata cleanly without losing old state. Easily undo with a popHistory() action. Managing Popups as a Stack Why a stack? Popups often open in layers (e.g., "Edit > Confirm > Warning") Stack structure helps keep closing behavior clean (like ESC closes the topmost) Example Usage Undo with History Back Button OnClick Handler With just a few well-thought-out reducers, you can build a robust, scalable view and popup system for your SPA. This pattern has helped me maintain sanity across multiple views and transitions in a complex design tool.

May 5, 2025 - 08:50

In large-scale SPAs like diagramming tools or applications, managing views, popups, and view history can become a tangled mess. In this post, I’ll walk through a clean and scalable way to handle these using Redux Toolkit, focusing on:

activeView with dynamic metadata
popupStack for handling layered modals
history for potential undo/redo or view back-navigation

Why Not Just use React State or Context?

React state is fine for small components, but doesn't scale for shared view state across dozens of components.
Redux provides a centralized, predictable, and testable structure for view transitions, modal handling, and history tracking.

Core State Structure

activeView: Keeps track of the current view (e.g., Workspace, Project, Floor).
meta: Contains dynamic data like isDirtyView, selected_project, or map polygons.
popupStack: Works like a call stack to layer modals/popups.
history: Stores previous views for easy backward navigation or undo.

View Transitions with History Support

This lets you:

Skip history if needed (e.g., for internal refresh).
Merge new metadata cleanly without losing old state.
Easily undo with a popHistory() action.

Managing Popups as a Stack

Why a stack?

Popups often open in layers (e.g., "Edit > Confirm > Warning")
Stack structure helps keep closing behavior clean (like ESC closes the topmost)

Example Usage

Undo with History

Back Button OnClick Handler

With just a few well-thought-out reducers, you can build a robust, scalable view and popup system for your SPA. This pattern has helped me maintain sanity across multiple views and transitions in a complex design tool.