Translator: your_nick_name_1515981839135

The original link

How did I organize the React & Redux project

In this article, I will share with you how I organized the React & Redux project, About two years ago the most popular structure to React projects was very similar to this one. Two years ago, the most popular React organization had a very similar structure:

Initializing structure The directory structure groups each file by function, Actions in the Actions folder, Reducers in the Reducers folder, and Tests in the Tests file….. . This is a quick way to organize these features, especially if you’re new to a project and don’t know where to put the modules. However, there are problems with this structure, such as poor reusability (such as using React in another project or using React Native in mobile APP). Therefore, in order to reuse some logic, such as the payment function that needs to be added in each function, move the corresponding files and tests to lib. How can I solve this problem? Back in the day, for me and a lot of developers, moving these files around in their scope, keeping tests close to them, like this.

It looks perfect, the problem has been solved, and I don’t think the Visual Components /dumb Components are in the scope, because the view is just a decoration when the data is presented to the user, and in many places I want to reuse a module but not a view, To me view dependencies are independent and should not be coupled to logic, which is best for reuse. Then, I extracted the view and created the _Components_ folder under SRC. However, there didn’t seem to be any corresponding function functions in the same directory, so sometimes I needed to create some test utils, which also had to be placed under SRC, but the current file directory was too confusing, so I decided to create **modules** put some logic in it.

I think another important point is to care about the _screens_ Folder, but why do you extract page components if they are also components? The answer is because the components folder is for reusable, visual components, not very coupled to the current application. The Utils folder is used to preserve some logic that can be extracted from the code, but not about the scope of the application. If you have some different opinions Thanks for your time!

Thanks to José Roniérison and Lucas Monteiro.