Getting Started with Redux Saga
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
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.
Also create a Count.css file in the component folder and add the below code in it.
Now, we will remove everything from App.js and add the Count component in it.
Our Counter is working fine in 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.
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.
Finally, we are wrapping the app with the Provider containing the store in index.js file.
Now, we will update the Count.js file, to dispatch the increment and the decrement functions using useDispatch hook
Next, in the App.js file we will show the count using the useSelector hook.
Our App will work as earlier only.
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.
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.
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.
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.
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.
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.
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.
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.
We are also adding a little of css in our App.css file.
Our app is showing the user data.
This completes our Saga project. You can find the code for the same here.