Organizing state in React
It can be difficult to think of user interfaces (UIs) as information architecture. Often, you get a rough idea of how the UI should look and behave and then you implement it. I do this all the time, and it's a great way to get the ball rolling, to discover issues with your approach early, and so on. But then, I like to take a step back and picture what's happening without any widgets. Inevitably, what I've built is flawed in terms of how state flows through the various components. This is fine; at least I have something to work with now. I just have to make sure that I address the information architecture before building too much.
As your application grows in size and there are more pages and components that need to interact with state, the way we have used state in this book might not be sufficient anymore. Therefore, it makes sense to split up your application state into reducers and Context. We can do this with Context, which will be explained...