<Provider />

Overview

The <Provider /> makes the Redux store available to any nested components that have been wrapped in the connect() function.

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 <Provider> .

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 <Provider>.

Props

store (Redux Store) The single Redux store in your application.

children (ReactElement) The root of your component hierarchy.

Example Usage

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

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';

    import { App } from './App';
    import createStore from './createReduxStore';

    const store = createStore();

    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    )

Usage with React Router

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { Router, Route } from 'react-router-dom';

    import { App } from './App';
    import { Foo } from './Foo';
    import { Bar } from './Bar';
    import createStore from './createReduxStore';

    const store = createStore();

    ReactDOM.render(
      <Provider store={store}>
        <Router history={history}>
          <Route path="/" component={App}>
            <Route path="foo" component={Foo}/>
            <Route path="bar" component={Bar}/>
          </Route>
        </Router>
      </Provider>,
      document.getElementById('root')
    )