In the React Redux problem set, we go over using the pre written Provider component as a wrapper component that gives the entire React app access to the store. The syntax for that to happen is:
<Provider store={store} >
<App />
</Provider>
I’m confused as to how passing the store as the props for provider allows all the child components to gain access to the store.
That’s how React works, components store state internally. So if you store state in the component at the very top of the component tree, you can then pass that state down to components beneath it.
But the way the code is written, nothing is being passed to the App component, so how does it have access to the store?
Have you worked through the rest of that section of the curriculum yet? It might make more sense once you do.
There are other things you need to do before Redux works.
You have your Provider component with it’s store prop, but then you also have to connect components to the store, and map state and dispatch to props. The lessons following on from Use Provider to Connect Redux to React explain how to do this in more detail.
But…there are a lot of moving parts to Redux and I’ve seen experienced devs really struggle to use it until it finally clicked for them. Don’t be discouraged if you don’t understand it fully just yet.
What @JacksonBates said, but if you want an explanation (I’m writing this on my phone on the way to work, a bit rushed so apologies if I’ve missed a step):
React components rerender when they are given new props (or their state changes). Each JSX component is a function: pass arguments to it, it executes.
Any components below them in the tree of components also naturally rerender: so for example the top component’s gets new props, that rerenders, which causes a child component to rerender, which causes a child of that to rerender and so on.
This is standard React stuff – it’s how React works, this is what I meant in my first reply. You store the state of the application in components, and changes to the state affect components below that in the tree.
react-redux provides the <Provider> component, and this literally just provides the store the the app: it normally goes right at the top, above <App>, because you want it available to everything.
Redux is just an object (the store) with some methods attached to it. One of those methods is dispatch which lets you update the store.
It also allows you to add subscribers to the object – a subscriber is just a function, and all this means is that when the store updates, every subscriber function runs.
react-redux provides the connect function that returns the component you wrap it in. Remember JSX components are just functions as well, so it’s just a function that returns a function that React can execute to generate the [HTML node] output. Under the hood, it’s going to create a <Connect> component that wraps your component.
connect gets registered as a subscriber to the Redux store (the one that’s sitting in the Provider right at the top of your app. Where it’s defined, it is now connected to the store: inside the function closure you can read the store, use the dispatch function, and because it’s a subscriber, connect is going to be executed every time the state of the store changes.
You pass dispatch and whatever bits of the store that you want as props to the components you have wrapped in connect. So now you can run the dispatch function from that component, and when the store updates, connect executes, and now has the updated state: if any of the bits of state you are interested in have changed, the child component rerenders.
Note that this is a simplification because if the above were all literally true, then the entire app would rerender every time anything changed. react-redux (and React itself) have optimisations that prevent needless rerenders. For example, react-redux will do a simple comparison (shallow comparison) between previous and current properties and won’t do anything if nothing has changed.
Seeing the whole picture in one page really helped. Thank you!