Directory Structure & Naming
We have made an effort to standardized our directory structure and naming of files across repositories where we have a redux implementation. This makes it far easier to switch between client apps and not get lost!
In blip, the path to all the redux-related code is app/redux/
; in the Chrome uploader it is lib/redux/
. Within redux/
the directory structure is as follows:
- a folder
actions/
contains the files:async.js
for asynchronous and/or conditional action creators that depend on theredux-thunk
middlewareindex.js
for exporting all the actionssync.js
for the (simple) synchronous action creators that do not require theredux-thunk
middleware
- a folder
constants/
contains the files:actionTypes.js
for, you guessed it, the action type constants- other files for constants as needed for errors, &c
- a folder
containers/
contains the files:- for the "root" app component, in dev and prod versions (as the dev version includes code to render the redux devtools UI)
DevTools.js
to render the redux devtools UI
- a folder
reducers/
contains the files:- for the reducers (quelle surprise!) [Since we use the standard
combineReducers
included with theredux
core library, our reducers are broken up into separate files representing branches of the state tree as appropriate to each application.] misc.js
is the name we use for the file containing a collection of very small reducers (that on their own don't merit a whole file)index.js
which contains the call tocombineReducers
and exports the combined set
- for the reducers (quelle surprise!) [Since we use the standard
- a folder
store
contains the files:- for configuring dev and prod versions of the redux store
index.js
for exporting the appropriate (dev or prod) store
Or in sum:
├── redux
│ ├── actions
│ │ ├── async.js
│ │ ├── index.js
│ │ └── sync.js
│ ├── constants
│ │ ├── actionTypes.js
│ │ ├── [&c]
│ ├── containers
│ │ ├── Root.dev.js
│ │ ├── Root.js
│ │ ├── Root.prod.js
│ │ └── DevTools.js
│ ├── reducers
│ │ ├── index.js
│ │ ├── misc.js
│ │ └── [&c]
│ └── store
│ ├── configureStore.dev.js
│ ├── configureStore.prod.js
│ └── index.js