1

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.

Improve this question
1
  • 2
    Reactjs is an unopinionated library. You might have come from Laravel or c# or even Angular. It's a little bit different here. You can customize folders and the architecture as you like. => Reducers, actions, and store are redux state management thing => The component is a dull comp, without states => Containers/Pages - Main pages with states Commented Jun 8, 2021 at 13:23

1 Answer 1

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Got it, thank you. After all these modules (?) are not containing the standard layer logic , these are just some user defiened structures. But can you group them by role? By this I mean is it correct to say that business layer strucutre was made by grouping the redux specific modules like actions, constants, reducers or it's wrong because in React is not a layer based library? (maybe this question is a little bit dumb but I like to divide my architecture functionality by roles)
You won't see many "layers" any more in React, since hooks started to move a lot of logic into components themselves. But generally, you could see React components as "representational logic" or "component-local business logic" while you would see Redux as "global business logic". But with all the other libraries possibly playing a role there, all of this is fluent and varies wildly from application to application.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.