CODEWITHSUNDEEP
javascriptreactjsredux
kidcapital
kidcapital

Reputation: 5174

Is it OK to put a container in a component in Redux?

I'm hacking with React/Redux and have been building lots of container and components.

However I recently encountered a design choice I made that made on of my Elements look like this:

enter image description here

My question is is this design OK? Basically I am struggling how to pass the Redux Actions down to the Button, since the button is a few levels deep. I could keep passing the actions down component to component from the HeaderContainer, but if the DOM got deeper it would just get worse and worse.

I feel like this design is WRONG since a presentational component is calling a container component.

Any thoughts?

Upvotes: 2

Views: 79

Answers (1)

Lyubomir
Lyubomir

Reputation: 20027

You have three options:

  • First is to directly connect the button component to the store and let it be both container & presentational component. Simple and effective.

    export default connect(mapStateToProps, mapDispatchToProps)(ButtonComponent)

    See an example from the creator of Redux here (the 4th post)

  • Second is to create a container to wrap the button and let the button be only presentational - your current implementation. Very good layered architecture, but overengineered at this point for me.

  • Third is to pass the action down from the HeaderComponentContainer to the ButtonComponent.

I would go for the third one if the button is no more than 2 levels deep, since you already connected your HeaderComponentContainer and as a parent it is its responsibility to determine what functionality its children should provide (they only present, right?).

PS. You can use React's context to pass actions / properties arbitraly deep in the hierarchy without explicitely doing it for each component.

Upvotes: 1

Related Questions