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 top most)
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.
