mxstbr/react-boilerplate

Hi, I'm new to this room but have been using react-boilerplate for a while now. I have a query about nested Redux states and would really appreciate it if someone can help me figure this out.

As per the redux docs, it's most advisable to keep the redux state separated as domains.

{
    simpleDomainData1: {....},
    simpleDomainData2: {....},
    entities : {
        entityType1 : {....},
        entityType2 : {....}
    },
    ui : {
        uiSection1 : {....},
        uiSection2 : {....}
    }
}

How do achieve this data structure in react-boilerplate? I have been creating my Containers using the built-in generators, and keeping them all at the same level like so:

App
|__ Components
|__ Containers
      |__ Container1
      |__ Container2
      |__ Container3
      |__ Container4
      :
      :

My redux state is super normalized like so:

{
  route: {
    location: {
      ....
    }
  },
  container1: {
    data: {}
  },
  container2: {
    data: {}
  },
  container3: {
    data: {}
  },
  container4: {
    data: {}
  }
}

But I am now at a place where I need to nest Containers 2 and 3 within Container 1 (according to the business logic). How can I also mirror this structure on my redux store?

{
  route: {
    location: {
      ....
    }
  },
  container1: {
    data: {
          container2: {
                 data: {...}
           },
           container3: {
                data: {...}
           },
       }
  },
  container4: {
    data: {}
  }
}

How can we use injectReducer to implement nested states? Or is there another approach that you all use? TIA!!