I guess it’s too late to publish this kind of article. Many of you might already be familiar with all the basic stuff about react-redux, but connecting the dots i.e how how to create a react-redux app with proper folder structure so that it is easy to scale our application and avoid the mess of code tree might be the challenge for many folks(as it was with me). When I started up with a react-redux app I was totaly Boomed.
Thanks to rajaraodv for his excellent examples that helped me to start up building my own stuff.
I’ll start with a basic introduction(in layman terms) to React and Redux.
React: It’s just a view library that describes “What-to-display” and not “How-to-display”. And the wonderful thing about react is that everything you code is in JS(including HTML).
Redux: It’s the implementation of Flux architecture. Basically, it stores the state of the application. Our application now is dumb it doesn’t knows what was previously clicked or what was the last action performed, so to give a brain to our application we need to use Flux architecture.
So basically what the idea is that react will handle the view of our application and redux will serve as a brain(state) of our application. We can relate it to our computer system i.e Monitor(react) and CPU(redux)-though not smart enough :P.
The breakdown of our application goes into this way
Next comes up the folder structure of a basic react-redux application.
The entire application must be divided into pages. Division of page to handle different elements is achieved by placing containers inside a page. The actual components to display goes inside containers. So by this way we can reuse our code and our application remains isolated and independent of any other element and we can scale up our application very easily and quickly.
Now, lets understand the folder structure:
pages: All your actual web pages like dashboard, login, signup goes into this folder.
containers: Now this is where redux leads the game. This serves as brain for dumb components. All components which intend to change the state of application like login form, signup form etc should have container associated with them. It is not necessary to have container for all the components. One container can be bind to one component. So all the containers goes under this folder.
components: The files containing actual HTML DOM elements goes under this folder. Always try to make maximum number of dumb components(Pure components just like pure functions), also dumb components means components without associated container.
actions: Actions are supposed to tells the application that it will initiate the change but not actually dispatch(perform) it. The application takes the change and gives it to dispatcher to actually dispatch it. All these files should come under actions folder.
reducers: Reducers are the pure functions i.e neither it changes the input data, nor does it depends on any external factors like database, DOM node. Hence it doesn’t mutates the state, all it does is take the input and return the new state based on the input data. This is what pure functions are supposed to do.
In a nutshell actions tell the application that something will change -> application calls the dispatcher by passing action to it and dispatcher dispatches the action using some middle-ware(e.g: thunk) -> reducers will change the state based on the action performed and return the new state.
store: Redux configuration files are written under this folder.
constants: All the constant files should be placed under this folder.
styles: All the styling files should be placed under this folder.
app.js: The root our application.
routes.js: All the routes will be defined in this file.
That’s all for now.. Thanks for reading till the end, hope you liked it!