REACT-REDUX BOILERPLATE CODE

REACT-REDUX STARTER PACK

What is the react-redux-thunk boilerplate setup?

React-redux boilerplate setup is a starter pack code needed to build any create-react-app(CRA) single-page application that includes public and private route setup with react-router-dom, redux-thunk middleware setup with API call example, and many more…

Demo video

Dependencies:-

1. react-router-dom
2. redux
3. react-redux
4. react-thunk
5. redux-devtools-extension
6. axios

Let's start…

Step 1:-

Firstly, create an empty react project using the command “npx create-react-app react-redux-boiler-plate” and press enters under the folder of your choice.

Next, install few dependencies as shown below:

Now, we are ready to move towards making boiler-plate code react-redux.

Step 2:-

After, installing all dependencies delete all the unnecessary files and add two new folders under the src folder and name it as Component and Redux respectively. After deleting files and adding folders, your folder structure should look like this:

Note:- You can also delete .eslintcache and debug.log files as well.

Step 3:-

In our App.js file, we will import “BrowserRouter as Router, Route, Link, Switch” from react-router-dom for routing in our application. Also, we will import our App.css file and three(3) components[Public.js, Private.js, and Data.js].

App.js

This is the Public.js component and it will be a public route(visible to all users).

Public.js

This is the Private.js component and it will be a private route(visible to only logged In user). As we can see we have wrapped our private component and Data component around PrivateRoute which will not allow the non-verified users to view the page.

Private.js

Data.js

Note:- In this component, we have used useSelector(to get the value of redux state) and useDispatch(to call the action from redux). We will implement redux in the next section.

This is our PrivateRoute component which checks whether our user is logged In or not. It will render component only if a user is logged In else it will redirect the user to the login page. Here, I have used the flag of isLogin, in your case you can perform authentication.

PrivateRoute.js

REDUX SETUP

In this section, we will add redux to our app. Redux is a stage management tool. In redux we have 3 parts, Actions(functional programming) where we write logic and actions should be taken and response is passed to Reducers(where the state is updated). In industry, we collect all reducers in a single file which is known as combineReducers. Lastly, a very important part of redux is store setup, where we create a store with the initial state, pass combined reducer, middleware(here it is thunk), and a redux developer tool for debugging.

In redux, we write all actions under the Actions folder and reducers user Reducers folder respectively. As discussed above, we will import all the reducers under reducer.js(which will act as a combineReducer).

Redux folder structure

Our App.js is wrapped with a store component that allows us to redux data across our application.

This is our store.js file.

store.js

Now, our App.js will look like this:-

Line no added:- 7, 8, 11, and 27.

App.js (After redux setup)

Now, in our Data.js page, we will print data from a dummy API(https://jsonplaceholder.typicode.com/posts) using axios for fetching data. For the same, we will have to make an action file where we perform fetching and pass the response to update state under reducer.

dataAction.js

dataReducer.js

Now, we will import dataReducer into our combineReducer file.

reducer.js

Congratulations, now we can use data(dataReducer) state across our application.

Let’s see how it works:-

Line no 10:- By using dispatch(dataAction.getData()) we fetch the data from API.

Line no 6:- By using useSelector() we call the state from combineReducer.js.

Lastly, we check if data is loaded or not, once it is loaded we print the data over the page.

Data.js

Yes, Redux is all about useDispatch() and useSelector().

How to use it?

1. Go to the folder where you want to create a project and open terminal
2. Run command “git clone https://github.com/bilalbhojani24/react-redux-boilerplate.git”
3. Now, do “npm install” and boilerplate code is ready to use.

Conclusion

Github repo: https://github.com/bilalbhojani24/react-redux-boilerplate

If you guys have any questions. Please feedback so we can discuss and improve each other.