creating a controller structure in react
State management within components is relatively easy to accomplish; however, having something akin to a parent-child-cousin relationship requires some trickier React component structuring.
I needed to accomplish some interesting interactions with state management that would ensure:
- Rendering would happen only once to start for each component
- Re-rendering would only happen when I made changes to child state
- The components could talk to each other to change the state of one another
- There was a centralized orchestration that was easy to manage
Below is a diagram of the general layout that I wanted to accomplish. This is a similar functionality to MVC within OOP.
I was able to accomplish this with the 6 components in the above diagram:
- Desktop - The interactable area rendered for users
- Desktop Controller - The state management for sub-components that directly implements the content
- Icon Controller - The state manager and rendering agent for Icon components
- Icon - A main interactable component
- DraggableContainerController - The state manager and rendering agent for DraggableContainer components
- DraggableContainer - A main interactable component