<Provider/> vs connect() in Redux?

What is the difference between these two? It seems that <Provider/> gives your connected component access to the Redux store, while connect() connects your component to the React store. Why are they both needed? I went here and here and that’s what I got from it. Thanks for any help.

In the redux-react library, <Provider> is the very top level component where the store lives in your React app. The <Connect> component (or the useSelector/useDispatch hooks) is how you connect individual React components to that store. Without a provider, there’s nowhere for the redux store to live in the app.

What it’s basically doing is that you store the store (:upside_down_face:) in the state of a component called <Provider>. Then from any components underneath it in the component tree, you can access and update the state of <Provider> via <Connect> components (or via useSelector and useDispatch hooks).

1 Like