This React+Redux folder structure will definitely help you organize your React-Project!!
Greetings, fellow Coders!!✌
If you are new to React, then maybe you are making that very rookie mistake that everyone does, even I did! At first you won’t even realize it because it’s just the beginning and you might not be prepared for the challenges you are going to face when you expand your project, add more and more files without realizing that most of them work exactly the same and maybe if you had arranged them in proper manner then you could have avoided that “too many files in single folder” problem.
So this files organization problem appears mostly in the redux fields where you need to create new file for every new state you define and not only one you need to create minimum 3 files for a state. And it becomes very difficult to keep track of each file if they are poorly arranged.
Let me show you exactly what I am talking about:
So this was my first React project and for some more projects I followed this same pattern. I never realized the problem until, I got introduced to other concept like Redux which can increase the amount of your files very easily. I mean to be frank it’s not even a pattern it’s just all files arranged under single folder.
How does it get worse?
Now if you know about redux then you have an slight idea what I am talking about. Because while working on React-Redux project to follow the the redux pattern you came across many new files like Actions.js, Reducers.js, Constants.js, Store.js including all the components and screens that are already present in you app.
At start, you will think that Redux just makes our code more complex and difficult to maintain because all the new concepts it introduces, but it will not be problem as, the hump is to slow down and really understand, without too much code, how to properly arrange and maintain you code. Because once you understand the logic then you just have to follow the pattern It’s that simple!
Best way to Arrange your Src Folder:
According to me this has to be the best way to arrange your Src folder or at least this is how I do it. I mean it is really simple to understand and makes your code more readable. Maintaining your folder is as important as maintaining your code.
Even if it is self explanatory I would tell you how to access this structure while coding, step-by-step:
Imagine that I have backend and database ready with routes created for Models Products, Orders and Users. For e.g.
Now to get started with frontend:
- First I will create the necessary constants in Each separate constant file as per defined model in constants folder:
2. Now go to reducers folder and create the reducer.js file for created constants
3. Now in store.js define all your reducers and combine them to create store
4. Go to you actions folder create actions.js file and define action that you want to perform
5. Now your redux store is available to use in your components/screens
So now what you have to do is just repeat this 5 steps every time you want create new action. In this manner your code will be well organized and you won’t get lost in your bundle of files.
Hers’s my final project structure:
If you want know more about this project refer to my github repo.
Using latest Slice pattern:
Now in case you find above one difficult too, you can use the latest method from react library. To get started, without creating app using command “create-react-app” you need to use this command — “npx create-react-app my-app — template redux”. This will create react-redux template project with latest folder structure using redux. Which looks like this,
for more about this react-redux templates you can refer to their Documentation.
Now don’t need to freak out here by this _Slice.js files. This one file is basically the combination of the three files(constant, action, reducer) we used to create in traditional redux pattern.
As you can see Keep you store.js file in app folder, then in features folder create a separate folder for your state as one file for component and other for _slice.js which includes all your redux operations.
Let me give you a short tour of this _slice.js file
At top line I imported createSlice from reduxjs/toolkit. Now what you need to know here is that slice is just a layer and each layer will combinedly form your store. So when we create a slice we define states at start in initialState. Then create a reducer just below it which will contain your actions as function and in the end just export everything.
The pattern you see here is same as I covered in my last context api blog, so you can check that out Here.
And this is how you use it in your component. The selectUser you exported can be used using useSelector hook. And actions to be dispatch such as logout can be used using useDispatch hook. As you can see components work just as in old pattern and there in so much deduction in no. of files as well.
You can follow this video tutorial to know the basic of the slice pattern https://youtu.be/3Ct6zuHYDtY
I hope this post was helpful!!😊
Keep Coding!💻
