import React from 'react'
import { connect } from 'react-redux'

// Create the component that you want to make smart.
class MyContainerComponent extends React.Component {
  //...
  
  // Here you have access to the Dispatcher through the props.
  doAction() {
      this.props.dispatch({ 
          type: 'SOME_ACTION',
          data: {}
      });
  }
  
  render() {
      // And you have access to the selected fields of the State too!
      return <div>{this.props.data}</div>;
}

// Select the props which you want to inject in the component, 
// given the global state.
function select(state) {
    return {
        data: state.data
    };
}

// Wrap the component to inject the Dispatcher and the State into it.
export default connect(select)(MyContainerComponent);

import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import 'MyContainerComponent' from 'components/MyContainerComponent.jsx'
import store from 'store'

// Render the Provider component with the the Store 
// in the props at the root of the hierarhy.
ReactDOM.render(
  <Provider store={store}>
    <MyContainerComponent />
  </Provider>,
  document.getElementById('content')
)

import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'

import { Provider } from 'react-redux'
import store from 'store'

import LoginPage from 'components/pages/Login.jsx'
import SignupPage from 'components/pages/Signup.jsx'
import DashboardPage from 'components/pages/Dashboard.jsx'

// Add in the root of your components hierarhy the Router tag, 
// connect it to the browser history. Define the App component as 
// the parent component for pages inside of the Router. Define 
// the set of Routes as the pair of an URL path and a page component.

// And yes, here the Router isn't in the root exactly, because 
// I combined it to the react-redux staff to show much real example.

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <Route path="login" component={LoginPage} />
        <Route path="signup" component={SignupPage} />
        <Route path="dashboard" component={DashboardPage)} />
        <Route path="*" component={DashboardPage} />
        <IndexRoute component={DashboardPage} />
      </Route>
    </Router>
  </Provider>,
  document.getElementById('content')
)

import React from 'react';

export default class App extends React.Component {
    //...

    // Now you have the "chidren" prop in the props of the App component.
    // That children is the one of the pages components you defined in routes and 
    // you can put in where you want to.
    render() {
        return (
            <div id='page' className='page'>
                {this.props.children}
            </div>
        );
    }
}

import { combineReducers, applyMiddleware, createStore, compose } from 'redux'
import { routerReducer, routerMiddleware } from 'react-router-redux'
import appReducer from 'appReducer';

// Combine your base app reducer with the router reducer, 
// now the application data will be in the "app" prop 
// and the routing data will be in the "routing" prop of the State.
export function getStore(history) {
    const reducer = combineReducers({
        app: appReducer,
        routing: routerReducer
    })
    
    // Create the routing middleware applying it to history passed through arguments.
    const routingMiddleware = routerMiddleware(history)

    // Apply this middleware to the Store.
    return applyMiddleware(routingMiddleware)(createStore)(reducer);
}

import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { Router } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import { getStore } from 'store'

// Get the store with integrated routing middleware.
const store = getStore(browserHistory);

// Sync browser history with the store.
const history = syncHistoryWithStore(browserHistory, store)

// And use the prepared history in your Router.
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      //...
    </Router>
  </Provider>,
  document.getElementById('content')
)

import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import { UserAuthWrapper } from 'redux-auth-wrapper'
import { getStore } from 'store'

import App from 'components/App.jsx'
import PageSignup from 'components/pages/signup.jsx'
import PageLogin from 'components/pages/login.jsx'
import PageDashboard from 'components/pages/dashboard.jsx'

// Do the Store staff (see above about it)
const store = getStore(browserHistory);
const history = syncHistoryWithStore(browserHistory, store)

// Create the wrapper that checks if user is authenticated.
const UserIsAuthenticated = UserAuthWrapper({
  // Select the field of the state with auth data
  authSelector: state => state.app.user,
  redirectAction: routerActions.replace,
  // Choose the url to redirect not authenticated users.
  failureRedirectPath: '/login',
  wrapperDisplayName: 'UserIsAuthenticated'
})

// Do the same to create the wrapper that checks if user is NOT authenticated.
const UserIsNotAuthenticated = UserAuthWrapper({
  authSelector: state => state.app.user,
  redirectAction: routerActions.replace,
  failureRedirectPath: '/dashboard',
  // Choose what exactly you need to check in the selected field of the state 
  // (in the previous wrapper it checks by default).
  predicate: user => !user,
  wrapperDisplayName: 'UserIsNotAuthenticated'
})

// Wrap the components in the routes depends on what users have the access to them.
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <Route path="login" component={UserIsNotAuthenticated(PageLogin)}/>
        <Route path="signup" component={UserIsNotAuthenticated(PageSignup)}/>
        <Route path="dashboard" component={UserIsAuthenticated(PageDashboard)}/>
        <Route path="*" component={UserIsAuthenticated(PageDashboard)}/>
        <IndexRoute component={UserIsAuthenticated(PageDashboard)}/>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('content')
)

import request from 'axios';

// Let's assume we need to get the user data through API.
// We create the action function that takes the user id 
// and make the async request.
export function getUser(id) {
    // We have access to the Dispather to dispath 
    // actions inside of the action function.
    return (dispatch) => {
        request
            .get(API_URL + '/users/' + id)
            .then(function(req) {
                // We dispatch the success action 
                // function when the request completes.
                dispatch(setUser(req.data));
            })
            .catch(function(req) {
                // We dispatch the error action function 
                // when the request ends with an error.
                dispatch(setUserError(id));
            });
    };
}

//This is two usual sync action functions.
export function setUser(data) {
    return {type: 'SET_USER', data};
}

export function setUserError(id) {
    return {type: 'SET_USER_ERROR', id};
}

import React from 'react'
import { getUser } from 'actions'

class MyComponent extends React.Component {
    //...
    
    // Dispatch the imported action function with the Dispatcher
    // that you have because of react-redux.
    getUser(id) {
        this.props.dispatch(getUser(id));
    }
}