react-router-dom and redux

actions-project.js

/**
 * src/actions/project.js
 */
export const newProject = () => {
    return {
        type: 'NEW_PROJECT'
    }
}

app.js

/**
 * src/app.js
 */
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import Main from './main'
import * as projectActions from './actions/project'

const mapStateToProps = (state) => {
    return {
        project: state.project
    }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        ...projectActions
    }, dispatch)
}

const App = connect(mapStateToProps,
    mapDispatchToProps)(Main)

export default App

data.js

/**
 * src/data.js
 */
export const project = [
    {
        id: 1,
        title: 'Hello Pussy'
    }
]

index.js

/**
 * src/index.js
 */
import { render } from 'react-dom'
import React from 'react'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'

import App from './app'
import { store, history } from './store'

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

main.js

/**
 * src/main.js
 */

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

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

import {
    history,
    store
} from './store'

const Home = ({ match }) => (
    <div>Home</div>
)

const Tacos = ({ match }) => (
    <div>
        Tacos to order: 
        <Link to={`${match.url}/plain`}>Plain</Link>
        <Link to={`${match.url}/cheese`}>Cheese</Link>
        <Link to={`${match.url}/chipotle`}>Chipotle</Link>
        <div>
            <Route path={`${match.url}/:kind`} component={ Taco } />
        </div>
    </div>
)

const Taco = ({ match }) => (
    <div>You ordered {match.params.kind}</div>
)

const Main = (props) => (
    <ConnectedRouter history={ history }>
        <div>
            <Link to="/">Home</Link>
            |
            <Link to="/tacos">Tacos</Link>
            <div>
                <Route path="/" component={ Home } {...props}/>
                <Route path="/tacos" component={ Tacos } {...props}/>
            </div>
        </div>
    </ConnectedRouter>
)


export default Main

reducers-index.js

/**
 * src/reducers/index
 */
import {
    combineReducers
} from 'redux'
import {
    routerReducer as routing
} from 'react-router-redux'

import project from './project'

const rootReducer = combineReducers({
    project,
    routing
})

export default rootReducer

reducers-project.js

/**
 * src/reducers/project.js
 */
const project = (state = [], action) => {
    console.log('project', state, action)

    return state
}

export default project

store.js

/**
 * src/store.js
 */

import createHistory from 'history/createHashHistory'
import {
    createStore,
    compose,
    applyMiddleware
} from 'redux'
import {
    routerMiddleware
} from 'react-router-redux'

import rootReducer from './reducers/index'
import { project } from './data'

const initialState = {
    project
}

export const history = createHistory()

export const store = createStore(rootReducer,
    initialState, compose(
    applyMiddleware(routerMiddleware(history))
))