REACT / ROUTER / REDUX (DRAFT!)

please note this is subject to change.
specifically this is currently using a single folder structure.
this approach is for learning purposes, with this structure likely to become a unit of work.

TODO

unit of work
external calls
examples within folders
composition of redux model parts
integration of this to unit of work
test harnesses
development narratives
- greenfield
- new story
- new feature
- additional feature
- feature splitting
- updating a feature
- feature combining
GES?

Useful practices

Message naming

For messages without an identified central state,
VERB NOUN Convention for commands - statements of intent.
NOUN VERBPT(past tense) Convention for events that have occurred.

Application Structure (living document)

src/
    actions/
        ...
    components/
        ...
        index.js
    controllers/
        ...
        index.js
    node_modules/
    reducers/
        ...
        index.js
    .babelrc
    app.js
    constants.js
    index.html
    package.json
    README.md
    routing.js

Stock Files & Their Mechanics

index.html

Simply the starting point.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf8"/>
  </head>
  <body>
    <div id="mount"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

app.js

This provides the key wireup of the system.

import { createDevTools } from 'redux-devtools'
import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor'

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

import * as reducers from './reducers'
import Routes from './routes/'

const reducer = combineReducers({
  ...reducers,
  routing: routerReducer
})

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
    <LogMonitor theme="tomorrow" preserveScrollTop={false} />
  </DockMonitor>
)

const store = createStore(
  reducer,
  DevTools.instrument()
)

const history = syncHistoryWithStore(browserHistory, store)

ReactDOM.render(
    Routing.doRouting(store, history, DevTools),
  document.getElementById('mount')
)

routing.js

import React from 'react'

import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import * from './components'
import * from './controllers'

export default function Routing(store, history, DevTools) {
  return  <Provider store={store}>
    <div>
      <Router history={history}>
        <Route path="/" component={AppController}>
          <IndexRoute component={HomeController}/>
          <Route path="foo" component={FooController}/>
          <Route path="bar" component={BarController}/>
        </Route>
      </Router>
      <DevTools />
    </div>
  </Provider>

constants.js

Just a method of strongly typing what would otherwise be token strings and common values in a system. ie.

export const WASHCUSTOMERCAR = 'WASHCUSTOMERCAR'
export const CUSTOMERCARWASHED = 'CUSTOMERCARWASHED'

in the following format

export const VERBENTITYNOUN = 'ENTITYVERBNOUN' // command
export const ENTITYVERBPTNOUN = 'ENTITYVERBPTNOUN' // event

folder/index.js

This is an explicit inclusion of components within the folder.
As such entry manipulation allows for inclusion/exclusion of aspects of the system such as components, actions and routers.

ie. given the following filestructure

~\components\
        App.js
        Bar.js
        Foo.js
        index.js

with each item containing exports. Then index.js should look like

export App from './App'
export Home from './Home'
export Foo from './Foo'
export Bar from './Bar'

The folder structure, with instance examples.

These are the different aspects within a given feature.

actions
reducers
components
controllers
routes?

actions

Redux signature actions

reducers

These handle state transition and lifecycle, and adhere to the redux signatures

components

These are the react tags, and should be devoid of logic.

controllers

These are essentially orchistrators for providing resources to specific routes, such that the resource lifecycle is transparent to the routing, and does not bleed to other aspects of the system that need not know about it.

routes?

custom routes

JamesTryand/ReduxNotes.md