CODEWITHSUNDEEP
reactjsreduxmodulearchitecturelayer
MrNobody
MrNobody

Reputation: 655

Understanding React/Redux Architecture layers and modules

Many times I face with the following React/Redux structure and I don't understand what are the layers/modules in this case:

-actions folder
    --authentication.js
    --product.js

-api folder
    --axios.js -> for sending HTTP requests

-components folder
   --Component1Folder
     --Component1.js
     --SubSection folder
         ---Component1SubsectionA.js
         ---Component1SubsectionB.js

   --Component2Folder
     --Component2.js

-constants folder
    --actionTypes.js -> here are saved the redux dispatch constant variable like: AUTHENTICATION

-reducers folder
  --index.js -> containing all of the reducers
  --authentication.js
  --product.js

-service folder
  --socket.js -> creating socket connection

-App.js -> containing React components
-index.js -> Rendering App and provides the redux store
-store.js -> Creating Redux store

In this architecture what are the layers and which modules do they contain?

I thought about this:

Service Layer: contains api module and service module

View layer: contains the components module

Business layer: contains actions, constants, reducers module

Many times axios contains authorization too, then has another layer which is Authentication layer? Or this is just a simple feature.

Another thing which I don't understand is, that components also contains business logic, then they belong to view layer or to the business layer? Maybe the return to the view layer and anything else to business layer?

Am I thinking right? Thanks in advance.

Upvotes: 1

Views: 606

Answers (1)

phry
phry

Reputation: 44166

That file structure is based on pretty old opinions - nowadays you would get a different file structure when for example creating a project with the official Redux template (create-react-app myApp --template redux).

The Redux style guide gives a little insight in that in the point Structure Files as Feature Folders with Single-File Logic.

But in the end, those are all recommendations. There is no requirement for a "service layer", "view layer" or "business layer". You could also just put all of that into one file and call it a day. In the end, the file structure is primarily meant for you to structure your code as it feels good for you and your team. So what matters most is that you have a similar understanding on how your app works and what you want to put where. Nobody external can 100% tell you how to do that.

Upvotes: 2

Related Questions