Practical Example Using Global State

Now, it is time for hands-on exercises where you can see the global state in action.

For this exercise, consider building a dashboard application to show user-specific data when visiting the /dashboard URL.

In such applications, it is likely that a number of components require access to the profile and account data. Use global state to store this data. Later, components can access it via Store throughout the application.

The following diagram shows how the application looks. It has three main React components:

• A Header component connected to the global state.
• A User component that is responsible for loading profile data when the component mounts.
• A Dashboard component that is rendered when the user visits the /dashboard URL. It is also connected to the global state to access data and the update state by dispatching actions.