Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jonathan Mazala
9,860 PointsA nice tutorial - but it conflicts with others (re: Prop-Drilling)
I've gone through all of the React & Redux tutorials on Treehouse now. Other iterations of the scoreboard app involve local state passed through props. Then that is improved / refactored by using the React Context API to have a singe (local) data store. Rather than passing props in to each component, we use the Context API and include a <Consumer> wrapping necessary elements.
It was interesting to see this one replaces the Context API by using Redux as the single data store. However, we are back to passing in data (values AND functions) through props. Prop-drilling is prevalent again. I feel like we took a step backwards.
My question is - how do we combine the 2 concepts? How can we use Redux as a single data store and ALSO not have to rely on prop drilling to pass necessary data around?
1 Answer
Jonathan Mazala
9,860 PointsI'm wondering - is there a downside to adding:
export default connect(mapStateToProps)(Some_Component_Name);
to other components that could use the state to avoid prop drilling?
This way, for instance, we'd only need to provide <Player index={index} /> . And we'd need to pass nothing to <Stats /> and <AddPlayerForm />
I do understand we'd have to make Some_Component_Name a class that extends Component instead of a function that returns jsx.
cdlvr
14,448 Pointscdlvr
14,448 PointsI'm wondering the same thing. I believe your suggestion of calling connect on each individual component that needs to interact with the store is a valid solution (if not the best practice). This is what is done in the basic tutorial on the react-redux site. This also allows you to write different mapStateToProps methods for each component that only maps the data relevant to that specific component to props.