Folder structure, modules/ducks, best practices

[justingreenberg]

Thank you so much for putting together this awesome project. As a fresh set of eyes, I have a bit of feedback. Maybe it's just me but I found the project's folder structure to be a little confusing....

Proposed folder structure:

This is overly simplified as I didn't want to put the entire file tree into this discussion, but hopefully you get the idea. Components are contained within folders, aggregated and exported from root for destructured imports (similar to material-ui components).

./react-redux-universal-hot-example
├── bin
├── src
│   ├── components // eg. import { InfoBar } from '../components'
│   │   ├── CounterButton
│   │   ├── GithubButton
│   │   ├── InfoBar
│   │   ├── MiniInfoBar
│   │   ├── SurveyForm
│   │   ├── WidgetForm
│   │   └── __tests__
│   ├── containers // more descriptive, used in official docs/examples...
│   │   ├── About
│   │   ├── App
│   │   ├── Home
│   │   ├── Login
│   │   ├── LoginSuccess
│   │   ├── NotFound
│   │   ├── RequireLogin
│   │   ├── Survey
│   │   ├── Widgets
│   │   └── __tests__
│   │       └── routes.js // routes defined in root
│   ├── redux
│   │   ├── init.js
│   │   ├── middleware
│   │   │   └── clientMiddleware.js  // etc
│   │   └── modules // (action/creator/reducer/selector bundles)
│   │       ├── auth.js
│   │       ├── counter.js
│   │       ├── reducer.js  
│   │       ├── info.js
│   │       └── widgets.js
│   ├── server
│   │   ├── middleware
│   │   └── actions // proxy to separate REST api...
│   └── utils
│   │   ├── validationUtility.js // utility only (component-level definitions inside respective dir)
│       └── createDevToolsWindow.js  // etc
├── static
│   ├── dist
│   └── images
└── webpack

As you can see, the structure is pretty clean and self-documenting. The only downside is the additional folder nesting, but I think it's well worth it for the sake of maintainability. It may be a little contrived for an example project, but for those using this as a "starter" it will pay dividends down the road. I am setting up webpack aliases so make things easier and reduce some of the import boilerplate. The folder structure above is working in a branch on my local machine, let me know I'd be happy to submit a PR!

Modules/Ducks

I love the concept of encapsulating reducer tuples (plus selectors) into bundles. I know ducks is your project and I totally did not mean to torpedo the name with the proposed folder structure above! I really think "module" or "redux-module" encapsulates the idea in a coherent way that doesn't make newcomers feel like they have to learn even more (imo ducks kinda sounds like another framework or something that would require additional cognitive overhead, but really it's simply bundling reducer logic).

Please let me know if you would any separate PRs for the following, which are also done...

• Option to open Redux Devtools in a new window (it's so annoying in the application)
• Minimize bootstrapped data in SSR production mode, and other little optimizations

I will try to help write some some documentation when I have time.

Looking forward to your thoughts. Cheers!

[erikras]

I like this a lot. Especially the use of a water-based weapon to kill ducks. You are probably right, that "ducks" should be only a slang term to refer to the modular tuples. Sure, go ahead and submit a PR.

Yes, both of those additional PRs would be great!

Thanks for putting so much thought and effort into this. 👍

[bdefore]

i like this too, i'd been structuring my folder structure similarly in my fork

[jasonkylefrank]

Hi @justingreenberg and @erikras,

At the risk of sounding rather naive about some Webpack or ES6 (or other?) things, I have a question about how your path-less import statements work.

@justingreenberg, in his original post above, mentioned that (italics added are mine)

"Components are contained within folders, aggregated and exported from root for destructured imports".

This seems to have been implemented in this repo in places like src/components/index.js:

Is that all that is needed to enable the path-less import mentioned in the code comments? Or do you also need to set something up an alias or something in the Webpack config? Perhaps Webpack's resolve.modulesDirectories?

I see that you do specify src for that property in your webpack config:

Is it the combination of what you did in places like src/components/index.js, as well as specifying src in the webpack config's resolve.modulesDirectories that enables the path-less import statements?

[justingreenberg]

@jasonkylefrank yes, but the recommended method of resolving project paths is to use resolve.root instead of resolve.modulesDirectories (which i did not know about at the time)

see:
webpack/webpack#472 (comment)
webpack/webpack#1574 (comment)

[jasonkylefrank]

@justingreenberg Great, thanks for the info!