What should the application's state contain?

Question

React

I realized that I didn’t understand the principle of SPA at all, so I decided to ask you to guide me on the path.

For example, there is an application "Shop".
He has:

• Articles ( /article - list, /article/:id - detailed article )
  
• Products ( /catalog - list, /catalog:id - product details)
  
• Cart ( /cart )
  
• Profile (/profile, /profile/settings, /profile/history, etc.)
  
• About the company ( /about, just a separate "article")
  

Used by React + Redux + React-Router

What should contain application states at any given time?

For example, if we go to /article, then the component will load the articles for itself and add them to the application's state.
Then we go to /catalog, it will add its information to the application state.

So the App State will be something like this:

{
    articles: [...],
    catalog: [...],
    cart: {...},
    user: {...}
}

Where can I see the implementation of large applications on react + redux (I searched on github, there are either very simple ones, where there are no questions, or applications that are 4+ years old)?

I still do not quite understand how to separate smart components, for example:
An article in detail and a list of articles - 1 smart component (container) or 2 different ones?

Answer 1

/ this is not an answer, but just a comment /
set this for chrome
https://chrome.google.com/webstore/detail/redux-de...
and on some sites the entire redux state, both state and processed actions will be available , here you can dig deeper for interest in how they work,
for example medium.com