React Redux Action Reducer Layout

[eddiewang]

What do you think about refactoring to a feature based structure rather than a type based structure? I've seen significant DX improvement using this new type of structure.

basically all actions/reducers/container/test is contained in one folder.

http://jaysoo.ca/2016/02/28/organizing-redux-application/ https://vimeo.com/168648012

This popular react-boilerplate framework uses it: https://github.com/mxstbr/react-boilerplate

[sahat]

I will add a discussion flag to get some more feedback, but with that I am a big proponent of keeping it simple. As you can see I didn't even use containers as it is something I struggled with when I was learning Redux. I deliberately merged containers and components together and called them components because that's what most React devs are familiar with.

I am however open to organizing components into self-contained folders with tests and styles. The only issue with that is how do you require() CSS if you are not using Webpack?

[eddiewang]

Containers and Components is useful when state was managed by Containers, but with Redux, that paradigm is not as important as before. Simply pass in props from connect() and you're good to go. The feature layout makes life easier because React is component based, just like you said. A huge pain point developing React apps in that structure is looking for the right action/reducer for the specific component each time (and having to move between multiple folders to do so).

I usually use Webpack to process my CSS or compile my Sass. In this paradigm, it's suggested that CSS Modules (postcss) to keep everything contained within that folder.

We could also just compile and have it injected into the index.html template.

[JisuPark]

Actually I agree with @eddiewang's opinion. I believe ducks structure is efficient to maintain and develops.

But pain point is, those are not popular yet. Basic tutorials and examples are still using type based. For example redux