What is the standard folder structure of a React+Redux project?
Where do you put the
- action types
- components
- etc...
When I look at react-redux-socketio-chat I feel like this is maybe too much. Is it standard?
Add a comment |
3 Answers
The structure suggested by Eni Arinde is aligned with what is suggested in the Redux documentation.
You may find this proposal interesting too: https://github.com/erikras/ducks-modular-redux
Basically you make modules by bundling your action creators and reducers together. That does make a lot of sense as you will find that they are coupled together quite a bit.
Comments
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.
Comments
I have a boilerplate with basic setup of react redux following duck style. You can find it here: https://github.com/nlt2390/le-react-redux-duck
In general, this is how the folder structure looks like react redux file structure
- components: react components
- containers: where components are connected to redux using
connect(Component) - pages: contains many "components" and "containers"
- layouts: contains "pages" & "routes" in
react-routerwith some html wrapped outside them. - utils: contains any functions, constants being used across the app, e.g
convertStringToNumber(),apiUrl, etc - state: contains "actions", "reducers", data in redux store, like
{ post: [], postDetails: {title: 'lorem' } }
