Menu
I understand the concept of a react/redux app.
My question is, is there a preferred way to layout the folder structure and files.
After doing much research of repos online it appears that everyone does it slightly differently depending on their code flavor.
Angular on the other hand appears that there is a set structure.
Is this what makes react more powerful as you can tweak and adjust as your needs change?
Has the community agreed on any set patterns?
300
Most of the examples I could find about React/Redux applications (either client side or universal) are very simple. They choose to organize files by nature (action, component, container, reducer). The result is a directory structure looking like the following:
Since Redux is just a data store library, it has no direct opinion on how your project should be structured. However, there are a few common patterns that most Redux developers tend to use: Rails-style: separate folders for “actions”, “constants”, “reducers”, “containers”, and “components”.
If our component needs to have connection to redux store, then this is the place where we need to describe mapStateToProps and mapDispatchToProps and by making use of connect we can connect the component to redux store. The good practice is to mention the name of the file same as name of the file in Component folder.
There is no standard for how you structure you react+redux app, but there is a common pattern. This simple boilerplate simple-redux-boilerplate is a good example of the pattern commonly used. Show activity on this post.
As you said yourself; 'Everyone does it slightly differently'. It can help to give some resources right?
I don't know how much experience you currently have with React. I personally started with a traditional structure that made use of the dumb / smart component pattern, in which I created a src/redux folder. Within that I had an actions + reducers folder. This works fine for smaller applications.
I changed that approach after learning about the Redux Ducks pattern, which removes a lot of boilerplate and copy-pasting reducers.
I'm currently using this structure.
My suggestion is to try different approaches and see what works best. It depends on how you and your colleagues work in general. For example - if you know that everyone uses their CMD+P to search for specific files, you'd prefer being more explicit in file names, instead of having an actions/posts.js and reducers/posts.js file you'd prefer creating postsActions.js and postsReducers.js instead. I'd suggest reading these two Medium posts aswell, as inspiration:
Edit on 31 july 18: Seeing as a lot of people still read this comment and upvote it. I would like to recommend that if you're starting to work on a medium to large project, I would definitely try and get some knowledge about TypeScript and React. I've completely migrated to TypeScript as it makes it a lot easier to step back into a project after a while due to typings, interfaces, generics, and it being more strict. It greatly helps for your overview of the project. Several downsides of it is that you have to learn the typings of the React library and how to use this. TypeSearch greatly helps to see if there are typings available for a specific library. Also some patterns like higher order components can be awkward in TypeScript due to typings at first.
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
