React structure with routing

react-with-routing.js

/* 
 * This file contains JS modules for a React app using react-router and redux.
 * Each module should be in its own separate file, but for the purposes of
 * this gist, I've inlined them all.
 */

/* app/index.js */

import React from 'react'
import { Router, browserHistory } from 'react-router'
import routes from './routes'
import createStore from './createStore'

const store = createStore()

render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes}/>
  </Provider>,
  document.getElementById('app')
)


/* app/routes.js */

import React from 'react'
import { Route } from 'react-router'
import * as main from './main'
import * as todos from './todos'

export default (
  <Route component={main.Root}>
    <Route path="todos" component={todos.Root}/>
  </Route>
)


/* app/main/index.js */

export Root from './components/Root'
export { NAME } from './constants'

// export reducer, actions, etc.


/* app/main/constants.js */

export const NAME = 'main'

/* app/main/components/Root.js */

import React from 'React'

const Root = ({ children }) => {
  <div>
    <h1>My App</h1>
    { children }
  </div>
}


/* app/todos/index.js */

export Root from './components/Root'
export { NAME } from './constants'
import * as selectors from './selectors'
export { selectors }

// export reducer, actions, etc.


/* app/todos/constants.js */

export const NAME = 'todos'


/* app/todos/selectors.js */

import { NAME } from './constants'

export const getModel = (state) => state[NAME]


/* app/todos/components/Root.js */

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

import { getModel } from '../selectors'

const Root = ({ children, todos }) => {
  <div>
    <h2>Todos</h2>
    { /* Do something with todos */ }
  </div>
}

const selector = createStructuredSelector({
  todos: getModel
})

export default connect(selector)(Root)

Thanks for writing this up. Do you need to import {Provider} from 'react-redux'; in the app/index.js?

@DavidBrear Yes, I would say so.