<Provider />

Provider is a React HOC component used to register your bootstrapped state for your app, and provide it to the rest of the coflux API. The Provider should be at the top of your tree.

// Regular example
import { Provider } from 'coflux';
import ReactDOM from 'react-dom';
import App from './App';

const state = {
  user: { id: '1232asf' },
  inbox: []
};

ReactDOM.render(
  <Provider state={state}>
    <App />
  </Provider>
  , document.querySelector('#app')
);

// React-Router example
import { Provider } from 'coflux';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import App from './App';
import Inbox from './Inbox';
import SentMail from './SentMail';

const state = {
  user: { id: '1232asf' },
  inbox: []
};

ReactDOM.render(
  <Provider state={state}>
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <Route path="inbox" component={Inbox} />
        <Route path="sent" component={SentMail} />
      </Route>
    </Router>
  </Provider>
  , document.querySelector('#app')
);

In both of these examples, the Provider handles setting up the internals for the wrap API. The important part to note about the state you pass in is it's shape and path. The magic of coflux happens in the wrap method, but you won't get anywhere without understanding the path. The next page will explain path.