1. 25
    Redux: Passing the Store Down Implicitly via Context
    7m 56s

Redux: Passing the Store Down Implicitly via Context

InstructorDan Abramov

Share this video with your friends

Send Tweet

Learn how to make the store object available to all components by using the advanced React feature called “context”.

Jiwon
Jiwon
~ 4 years ago

I do not understand why you declared it twice.

const { store } = this.context;

like this ''' componentDidMount() { const { store } = this.context; }

render() { const { store } = this.context; } '''

Joe Talarovich
Joe Talarovich
~ 4 years ago

Life cycle methods. componentDidMount is only called on the first render. (Component is receiving the state at time of render) render is called each time the state changes, each time the state changes you will have access to the new state.

Kevin Pinny
Kevin Pinny
~ 3 years ago

Hah - I see the next lesson covers this. Still seems like marginal gains, to have to have all those contextTypes etc declared.

I assume the reason being (however I'm not an experienced React developer), that React likes to be very declarative and explicit. Using context is kinda providing a global variable, which feels implicit, which is the reason for those contextTypes. So it's explicit, like hey, you are kinda using globals.

Robert Smith
Robert Smith
~ 3 years ago

Hah - I see the next lesson covers this. Still seems like marginal gains, to have to have all those contextTypes etc declared.

I assume the reason being (however I'm not an experienced React developer), that React likes to be very declarative and explicit. Using context is kinda providing a global variable, which feels implicit, which is the reason for those contextTypes. So it's explicit, like hey, you are kinda using globals.

Yeah they are like a global. The gains are not marginal when an application scales however. What about components that are very deep in the tree? What happens when you want to move a component to another part of the tree. Without this Provider/Connect pattern it would require a lot of refactoring... This pattern makes things less brittle in that regard.

Sean Cooper
Sean Cooper
~ 3 years ago

I see that the video declares that store: React.PropTypes.object but the example code uses store: ReactPropTypes, the former is not working for me while the latter does, could someone please explain what's going on here?

Bayuadji
Bayuadji
~ 2 years ago

so im guessing this is different with the React.Context yea?

Loïc
Loïc
~ 10 months ago

yet another change with newer react versions (mine is 16.13.1), instead of store: React.PropTypes.object it is store: React.PropTypes

Mathieu
Mathieu
~ 8 months ago

Just a heads up for anyone currently watching this in 2020, the context API changed in React since the recording of this tutorial: https://reactjs.org/docs/context.html