redux routes

routes.js

import React, { Component } from 'react'
import { render } from 'react-dom'
import { createStore, combineReducers, applyMiddleware, compose, bindActionCreators } from 'redux'
import { Provider, connect } from 'react-redux'
import { Router, Route, IndexRoute, Link } from 'react-router'
import { reduxReactRouter, routerStateReducer, ReduxRouter } from 'redux-router'
import { createHistory } from 'history'
import { devTools, persistState } from 'redux-devtools'
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react'
import createLogger from 'redux-logger'
import Headbar from './components/utils/headbar'
import Home from './components/home'
import Distribution from './components/distribution'
import Intention from './components/intention'

const inc = () => ({ type: 'INC' })
const dec = () => ({ type: 'DEC' })
const counter = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INC':
      return { count: state.count + 1 }
    case 'DEC':
      return { count: state.count - 1 }
    default:
      return state
  }
}

const reducer = combineReducers({
  router: routerStateReducer,
  counter
})

const logger = createLogger()

const store = compose(
    applyMiddleware(logger),
    reduxReactRouter({ createHistory }),
    devTools()
)(createStore)(reducer)

const mapState = state => ({ value: state.counter.count })
const mapDispatcher = dispatch=> bindActionCreators({ inc, dec }, dispatch)

@connect(mapState, mapDispatcher)
class Counter extends Component {
  reporter = () => console.log( this.props )
  render = () => <div>
    <button onClick={ this.props.inc }>+</button>
    <button onClick={ this.props.dec }>-</button>
    <button onClick={ this.reporter }>Report</button>
    <p>{ this.props.value }</p>
  </div>
}

@connect(state => ({ routerState: state.router }))
class App extends Component {
  render = () => <div>
    <Headbar title="Agreements" />
    { this.props.children }
  </div>
}

class Root extends Component {
  render = () => <div>
    <Provider store={ store }>
      <ReduxRouter>
        <Route path="/" component={ App }>
          <IndexRoute component={ Home } />
          <Route path="/distribution" component={ Distribution } />
          <Route path="/intention" component={ Intention } />
          <Route path="/counter" component={ Counter } />
        </Route>
      </ReduxRouter>
    </Provider>
    <DebugPanel top right bottom>
      <DevTools store={ store } monitor={ LogMonitor } />
    </DebugPanel>
  </div>
}

render(
    <Root />
    ,
    document.getElementById('root')
)