How I organize my React & Redux projects

In this post, I will share with you how I organize my React & Redux projects and talk about some decisions that I made while working in some projects in the last two years.

About two years ago the most popular structure to React projects was very similar to this one.:

Initial structure folder

This structure groups each file by function. Actions in actions folder, Reducers in reducers folder, tests in tests folder, and so on. This structure offers a fast way to organize the things especially when you are new in some technology and don’t know where to put those things. But the problem with this structure is that it doesn't promote the reuse (like in another project that uses React or in mobile apps that use React Native).

So, in order to reuse some domain logic like a Payment feature you will need to enter in every function folder and move the respective files and tests to a separeted folder to create a lib. How to solve these problems?

Back in that time, to me and many developers, the answer was to separate the files in their respective domains and maintain the tests close to their origin. The structure was something like this.:

Perfect! Problems solved… In parts…I think that the views(visual components/dumb components) are not part of the domain because the views are just a way to decorate some data to display to the user. In many cases when I want to reuse a module I don’t want the views. To me the views are an independent module and shouldn’t be coupled with the logical data. It’s the best part to use and reuse components.

Then, I extracted the views from all domains folder and created a components folder in src directory. However, it doesn't seem right to have function folders merged with domain folders at the same level. So, after some time I needed to create a testUtils folder and, at first, I put this in the src folder too, but the current structure was very messy to me. Therefore, after some reflection, I decided to create a folder called modules and put all the logical domain inside.

Another point that I think that is important to care about is the screens folder. But “Why did you extract the page components from the components folder if they are components as well?”. The answer to this is because the components folder is for reusable visual components(dumb components) as opposed to screens which are very coupled with the current application.

The utils folder is used to keep some logic that can be extracted from the code but is not about the application domain, e.g. string/array operations.

If you have a differente point of view, let me know. I’d love to listen to you.

Thanks for your time!