Skip to content

Commit

Permalink
Add updated <Provider /> docs (reduxjs#1015)
Browse files Browse the repository at this point in the history
* Add updated Provider docs

* Add Provider documentation

* Update formatting
  • Loading branch information
maecapozzi authored and markerikson committed Sep 8, 2018
1 parent fac69ae commit c9ad235
Showing 1 changed file with 75 additions and 0 deletions.
75 changes: 75 additions & 0 deletions docs/api/Provider.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
# `<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**

```js
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**

```js
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')
)
```


0 comments on commit c9ad235

Please sign in to comment.