4

Can I use PropTypes in container components?

Typically, in container components, I connect to the redux store and get my own data but there are cases when I want to pass additional props from a parent component. In such cases, I want to make sure that I get all the data I need by using PropTypes. For example: 

MyComponent.PropTypes = { someObject: PropTypes.object.isRequired }

I haven't seen any examples of PropTypes being used in container components so I'm not sure if I can or not.

Improve this question
1
  • You can use PropTypes on every valid react component. Container components are just components. Nothing special with them. Commented Aug 9, 2017 at 23:29

1 Answer 1

Reset to default
1

You can certainly do it. You do not see it because if it's a prop you're passing down, the question is why is it not part of your app's state. One of the key points of redux is that you have your "one source of truth", and your smart container components should only have to interact with that. Having props passed down to the containers can sometimes lead to confusion in a large-scale app, but if it's just a personal project, I don't really see the harm.

It's not an issue of "can" so much as "should".

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Agreed! I'm trying to find the cleanest architectural approach to a common situation where I have a reusable date picker component. I'm trying to figure out where to put the handler functions. Originally I created it as a presentational component to keep it clean and simple. I then realized that the handler functions are identical so they should either go to an external file or (maybe) use a higher order component. I then realized why not use a regular container component and send in the props. stackoverflow.com/questions/45599409/…
Still not sure which way to go. For simplicity sake, I thought using regular container components would be the cleanest as I'd have access to my action creators and simply pass the necessary props from parent components. By using PropTypes, I can make sure I receive everything I need.
One could argue that adding only things that need to be shared among different components to the Store state is the cleanest option. I don't see any problems in passing props to containers--that's why redux supports ownProps after all.
Yes, there should be only one source of truth. But it's not the container, it's the store. Forcing the entirely of your app's data to trickle down through one distant, top-level container is an anti-pattern leading to bloated top-level components that know too much and discourages breaking complicated UIs into simpler components.
from Abramov himself: "Eventually you’ll realize that you are passing too many props down the intermediate components. When you notice that some components don’t use the props they receive but merely forward them down and you have to rewire all those intermediate components any time the children need more data, it’s a good time to introduce some container components. This way you can get the data and the behavior props to the leaf components without burdening the unrelated components in the middle of the tree." medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.