Best way to store presentation-specific data in react-redux application - reactjs

Question

I know the best practice is not using a redux store to save any kind of visualization-related data. But I don't see any way to avoid that in my project. I have a simple store like this:
{
pages: {
byId: {
'0': {
id: '0',
canvases: {
byId: {
'0': {
id: '0',
layers:
{
byId: ['0':{uid:'0'}],
allIds: ['0']
}
}
},
allIds: ['0']
},
selectedId: '0'
}
},
allIds: ['0']
}
}
It just stores the document filled by pages. Each page may have one or more canvases. Each canvas has zero or more layers. Visually each page/canvas/layer is a tree of nested blocks. My idea is putting a selection frame with some handles on top of z-index of my HTML when user clicks onto a layer. The problem is that selection component is in a different DOM tree relatively to the page but at the same time I need to know a bounding rectangle of my page, canvas and layer to overlay the selection correctly. What is the best way to do that? Do I need to use a redux store to save my bounding area?

Answer 1

I think a good solution here will be normalizr. It takes a json like this:
{
"id": "123",
"author": {
"id": "1",
"name": "Paul"
},
"title": "My awesome blog post",
"comments": [
{
"id": "324",
"commenter": {
"id": "2",
"name": "Nicole"
}
}
]
}
and turns it into something like this:
{
result: "123",
entities: {
"articles": {
"123": {
id: "123",
author: "1",
title: "My awesome blog post",
comments: [ "324" ]
}
},
"users": {
"1": { "id": "1", "name": "Paul" },
"2": { "id": "2", "name": "Nicole" }
},
"comments": {
"324": { id: "324", "commenter": "2" }
}
}
}
Take a look at the docs for normalizr, I think it can help you.

Answer 2

I decided to choose MobX + MST framework: https://github.com/mobxjs. This one is covering snapshots to easily manage application states. I am even able to connect Redux Dev Tools to track my state at runtime. In addition to that it has a support of volatile states which makes sense for storing some temporary data like drag and drop mouse offset or some not tied to store visual data. And another one thing is that undo/redo logic can be implemented easily. I am originally from OOP world so MobX/MST is closer to my mindset than Flux/Redux concepts.