Redux-Store Best practice: how best to separate data from UI state in a store?

Question

JavaScript

Are there any Best Practices on how best to organize Store in redux projects?
How to name and how to store flags in the tree with regards to the UI and the data itself?
Specifically, how to separate business logic data from the state of the interface in the store:
- show / hide this or that component
- change the appearance of the component
- show hide the dialog,
- screens in conjunction with routing
- etc.
how to store it in the store?

Answer 1

If these are global states that affect several components at once, you can store them like this

store: {
  ui: {
    sidebar:  true   
  }
  entitites: {
     //...
  }
}

if this is the state of the component, like
- show/hide this or that component
- change the appearance of the component
- show/hide the dialog,
it's better to use native react state.
And so in general, the structure of the Store depends on the application, I personally have not seen strict rules other than recommendations like "entities should be stored in a normalized form".

Answer 2

The state of an interface is usually stored in the component's state.
- screens in conjunction with routing (here, the state usually does not need to be stored additionally, since it is already stored in the route ( location object ))

Answer 3

Thanks for the answers Maxim and Ilya Rostopka
I think I formulated the question badly.
When to use state and when store is more or less clear.
The question is rather about the naming of the fields and the structure of the tree itself (even if it's all stored in the state - the question is also relevant).
My problem is this: when rendering, the components themselves abound
in such constructions:
It all comes in props (redux) or is somehow stored in state.
The order does not work, it is problematic to figure it out later.
It seems to me that there are not enough guidelines for naming both props values ​​and store/state structures. That's what I was looking for links to