<Provider /> makes the Redux
store available to any nested components that have been wrapped in the
Since any React component in a React-Redux app can be connected, most applications will render a
<Provider> at the top level, with the entire app’s component tree inside of it.
Normally, you can’t use a connected component unless it is nested inside of a
Note: If you really need to, you can manually pass
store as a prop to a connected component, but we only recommend to do this for stubbing
store in unit tests, or in non-fully-React codebases. Normally, you should just use
store (Redux Store)
The single Redux
store in your application.
The root of your component hierarchy.
In the example below, the
<App /> component is our root-level component. This means it’s at the very top of our component hierarchy.
Vanilla React Example
Usage with React Router
Creates a new
<Provider> which will set the Redux Store on the passed key of the context. You probably only need this if you are in the inadvisable position of having multiple stores. You will also need to pass the same
storeKey to the
options argument of
storeKey] (String): The key of the context on which to set the store. Default value:
Before creating multiple stores, please go through this FAQ: Can or should I create multiple stores?
Now you can import the above
connect and use them.