Thematic project organization for React + Redux projects

thematic-react-redux.md

Notes:

1. All actions should go in /actions.js and all constants should go in /constants.js (this is the one place where we deviate from keeping things together, as having all actions in one place makes understanding the entire application's potential state changes very straightforward)

2. The /index.js should mount the application, set up the store, and contain application routing

3. The /**/index.js in each child folder should contain that part of the state tree's reducer, action constants, and export /**/component.js wrapped by connect() from react-redux

4. If using Stylus, /style.styl can glob import all child /**/*.styl files so explicit tracking of them is not necessary

5. Each child /**/*.styl should only contain styles relevant to that view, without side effects

6. The child /**/component.js should be as simple and "pure" as possible, preferring stateless syntax where possible

7. If the child does not need a reducer ("pure" subview), /**/component.js can be skipped and simply make an /**/index.js

/
  /home
    component.js
    component.spec.js
    index.js
    index.spec.js
    style.styl

  /search
    /search-box
      component.js
      component.spec.js
      index.js
      index.spec.js
      style.styl
    /search-results
      component.js
      component.spec.js
      index.js
      index.spec.js
      style.styl
    component.js
    component.spec.js
    index.js
    index.spec.js
    style.styl

  actions.js
  actions.spec.js
  constants.js
  index.js
  index.spec.js
  store.js
  store.spec.js
  style.styl

We use Jest (Jasmine) for testing, so the *.spec.js files are the unit tests attached to each file.