Redux data structuring

Question

I'm trying to build a complex fully-dynamic app with Redux. I mean my App has lots of dynamic-generated forms with generated fields-components on-the-fly. I want to store in my Redux-store visual data about my components too. But how should i do it without mixing real data with visual component data?

For example if i have structure like this

Store { 
  visual: {...deeply nested visual-data-tree...}, 
  data: {...deeply-nested real-data-tree...} 
}

It is hard to render component because i need to search visual data first, then react component "value" in two trees.

But if have a structure similar to this:

Store {
  form {
    visual: {...form visual data...},
    data: {
      //Ok here the form "data" - widgets. Or it must to be visual? :)
      widget1 {
        visual: {type:"ComboBox", opened: true},
        data: 1
      }
    }
  }
}

You see the problem, now i have visual data inside real data of Form widget.

(form - data - widget1 - visual)

Visual data inside the real data is out of the concept.

How do you guys solve same problems of mixing data?

Really sorry for my poor english. I hope i clearly explained the problem.

Answer 1

Isn't the distinction superficial? I think a more important rule is that the data in the state should be normalized. For example, if you have Combobox widget letting you choose users, your data shape better be

{
  chosenUserId: 10, // Good!
  users: {
    10: { name: 'Alice' }
}

rather than

{
  chosenUser: { name: 'Alice' }, // Bad!
  users: {
    10: { name: 'Alice' }
}

If the data is duplicated in the state tree, it's hard to update it correctly and avoid inconsistencies.

As long as you keep the data normalized, I see no real need to divide visual and data. You might want to have top-level entity cache that looks like a database (e.g. entities which includes users, posts, or whatever data objects your app uses), but other than that, go with whatever state shape feels most comfortable when retrieving the relevant state.