I am looking for ways to structure state in my React components so that I can complete two steps together: (1) managing browser history in a complex application and (2) the ability to easily use individual components in environments outside the main application.
The application has a Panel component that allows users to navigate and read content on our website. In the main application, several panels can be opened and arranged together. Outside of the main application, there are other pages where I simply would like to easily remove one Panel component.
Since this code has already been developed, each panel has a rich state representing what content it has downloaded and other display options. This makes it easier to go to another page - I can just display the Panel component, and the user can interact with it, and he alone takes care.
However, for browser history, it gets hairy. There is an application component that manages several panels and states that have been clicked and popped out of history. To have a complete picture of the state of the entire application, each panel pushes a copy of its state when changes occur. When the status is deduced from the history, that the App component can transfer the initial state from each of the panels that it displays. As you can imagine, this becomes erratic and error prone update cycles that eventually return to each other.
It seems like the approach I need to take is to centralize the state (a la recommendation here ) and try to make each individual panel without apathy, since it will be a significant effort to rewrite all the calls setStatealready in the code, I am trying to assess whether this is the only way. It also seems that this approach will make it difficult to reuse components outside the application. I’ll lose the feeling that the panel is a standalone component that I can just do on the page, as this will require some kind of external manager to process its state and all the events that change it from the inside.
What would you recommend?
source
share