Learn how to make the store object available to all components by using the advanced React feature called “context”.
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; } '''
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.
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.
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.
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?
so im guessing this is different with the React.Context yea?
yet another change with newer react versions (mine is 16.13.1
), instead of store: React.PropTypes.object
it is store: React.PropTypes
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