Do I need to put all component states in the store?

Question

JavaScript

Friends,
What states should be reflected in the store?
Let's say there is a component that unloads a list of posts and draws them as a list. You can only store a list of posts, or you can go further and transfer all UI states (loading status, download start, download progress, and so on) to the store, for a complete understanding of what is happening. Many docks describe exactly this, and also transmit errors to the store.
What data do you usually store in the store if the data is loaded asynchronously and there may be various errors?
What do you store locally and what in the store?
Maybe I don’t understand something, because in my head the store is a data store, and in the docks, temporary values ​​are also passed to it.

Answer 1

All states are not needed.
You put the states of the component in the state of the component, the states of the data - in the store.
Most likely the source of your confusion is that you think that the data loading states are the state of the component, but this is not so, this just refers to the data - there is no data, the data is loaded, the data is loaded, the data is loaded with an error - this is not about UI . The fact that they are "temporary" does not mean anything. Information about what data is being loaded in is also data.
It may not be shown in the UI at all, or it may be shown in many components at once - it doesn't matter.
The UI can simply display these states in some way, just as it displays the data when it appears in the store.

Answer 2

https://redux.js.org/faq

Answer 3

The store is designed to store the state of the application. This state includes both data and various system needs, such as the current route (if we associate routing with Redux) or the user session. Put a loading indicator here too. In this case, the global indicator will show the loader, for example, as an overlay over the entire application.
But in cases where you need to put something local in the store, for example, when submitting a form, you need to switch its state; then use the component state. In cases where the same state is required by several components (but not the entire application), you can pervert in different ways. We in the project on flux simply made private stores that were shared between neighboring components, and avoided sharing the state between non-neighboring components. When there is only one side, as in redux, you can use HOC, inheritance, or write your own hook.