0

I would love to nest a container into another so that i don't end up with loads of code handled by a main page of the application. I feel all this logic should be distributed into lower level containers, but i can't find the best approach to do this. The idea is to have a main container using several containers, each of them with its own logic, reducers, actions, etc, so that the main container doesn't get too hard to manage.

My best approach at this point would be to:

  • create a specific selector linking both the mainContainer and the nestedContainer,
  • making the mainContainer reducer include the nested containers reducers into the state and
  • redux.connecting the nested containers inside the componentWillMount function of the mainContainer.

I feel the process is overcomplicated. Am I missing something? Is this a good practice? Should i keep trying to do this?

Noquepoaqui
  • 395
  • 3
  • 11
  • I think your idea of nesting containers and such is a very typical use case for using React. Containers can be seen as a whole page or just wrappers i.e. Header-Body-Footer Frame then a Tab-Frame inside of that, and then Columns Frame etc. So you're on the right track with that. Now for Redux, I think you should think about it in a different way probably? You don't have to make each container 1-to-1 to your action namespaces, although you can.... For me I would separate Redux namespaces in terms of data contexts. And I'm not sure redux.connecting in the cWM of the component is right. – josephnvu Sep 14 '16 at 17:28
  • @josephnvu how would you connect the nested containers? Where would you move all the action namespaces if they are not related 1-to-1 to a container? – Noquepoaqui Sep 15 '16 at 13:35
  • you can connect any React component, so you would connect it in its respective react component. It's a High Order Component. Redux is a single store, so in each Component/Container you will write it as if you're "pull" data from that store from for respective React component. Maybe I'm not understanding what you're trying to achieve. Have you looked at some Redux/React samples? – josephnvu Sep 15 '16 at 20:26

0 Answers0