Getting Started with Redux Saga

Photo by Linus Mimietz on Unsplash

Most, of us use Redux Thunk for Async tasks but we can use Redux Saga also for the same. In this project, we are going to use Redux Saga for the same.

So, first create a new react project and then change to it. Also install redux in it.

npx create-react-app redux-saga
cd redux-saga
npm i redux

Now, open the project in VS Code and create a components folder in the src folder. And add a file Count.js inside it. Add the below contnent in it. Here, we have two buttons, which increment a count variable.

Count.js

Also create a Count.css file in the component folder and add the below code in it.

Count.css

Now, we will remove everything from App.js and add the Count component in it.

App.js

Our Counter is working fine in localhost.

localhost

Now, it’s time to convert the normal React project into a redux project. We also need react-redux in our project for that. So, add it with the below command from the project root directory.

npm i react-redux

We will create our types, action and reducer in one file. This is called the duck method. So, create a redux folder in the src folder and inside it ducks folder.

Create a file count.js inside ducks folder. Here, we have written the logic for incrementing count.

count.js

Now, in a store.js file inside our redux folder, we will create our Redux store. We are also creating our combine reducer to utilize future reducers.

store.js

Finally, we are wrapping the app with the Provider containing the store in index.js file.

index.js

Now, we will update the Count.js file, to dispatch the increment and the decrement functions using useDispatch hook

Count.js

Next, in the App.js file we will show the count using the useSelector hook.

App.js

Our App will work as earlier only.

localhost

Now, we will learn about the midlleware of Redux Saga, which is a must to do API calls in Redux. Redux thunk can be also used in it’s place.

As, with most middleware, Redux Saga also comes in between the action creator and reducer. When a action is fired, it catches it and do the necessary tasks.

Redux Saga

We will install redux saga in our project by the below command.

npm i redux-saga

Now, we will create our duck for user. Create a file user.js inside the ducks folder and add the below content in it.

Here, in the setUser we will get the payload. The get user part will be handled by redux saga.

user.js

Now, create a folder sagas inside the redux folder. Inside it create a rootSaga.js file. Now here we are using a generator function of watcherSaga(), which will continous watch for any actions.

rootSaga.js

Back to our store.js file, we will add the new reducer of user. And we will also add the sagaMiddleware and configure to run thew watcherSaga.

store.js

Now, create a folder requests inside the sagas folder and add a file user.js inside it. Here, we have written a requestGetUser() function to do a GET request to the jsonplacer holder endpoint, to get a single user.

Notice that we have also installed axios from integrated terminal.

user.js

Next, create a folder handlers inside the sagas folder and add a file user.js inside it. Here, we are again using a yield function to do the async call.

Here, we are called the requestGetUser function from the yield. After getting the response we are calling a put to setUser. Now this setUser is the action creator from our duck file.

user.js

Finally, update the rootSaga.js file to have a takeLatest with GET_USER and calling the handleGetUser function.

This takeLatest function runs continously because of the watcher function.

rootSaga.js

We will connect the final piece of the puzzle, by dispatching the getUser() from the App.js file.

We are also taking the latest user state in it. In the return statement, we are showing the user name and email.

App.js

We are also adding a little of css in our App.css file.

App.css

Our app is showing the user data.

localhost

This completes our Saga project. You can find the code for the same here.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Angular Basics-6

Object Destructuring in JavaScript

How to create a Video Consultation Healthcare App in React Native Using Twilio!

How to reverse parametrize in PyTest fixtures

Indirect parametrize

Reengineer Microsoft Excel with JavaScript for a No-code Alternative to VBA

Bundling monorepos the right way

REACT INTERVIEW QUESTIONS.

My embedded GRID element

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Learning React with TypeScript by Building an API app

ReactJS Tutorial Part #4 ~ ReactJS Components

Implement email authentication with React + RESTful API

IntroductioReact JS