Skip to content

Instantly share code, notes, and snippets.

@jaysoo
Last active May 26, 2021 19:07
Show Gist options
  • Save jaysoo/b89d978cef6859332cf236c8e55ee53c to your computer and use it in GitHub Desktop.
Save jaysoo/b89d978cef6859332cf236c8e55ee53c to your computer and use it in GitHub Desktop.
React structure with routing
/*
* 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)
@michaelklopf
Copy link

@DavidBrear Yes, I would say so.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment