I have begun using redux-saga and find it useful.
We are going to make our first redux-saga. In which we are going to fetch data from the random API and we will print on the page. Nothing scary just normal function as we used in react-redux (except for the *).
Note:- This tutorial assumes that you have the great grasp of React and Redux. If you are not ready with that, I’ll definitely recommend you to go through the official documentation of React and Redux.
What is redux-saga: redux-saga is redux middleware library, that is design to make handling side effects in your redux app. It uses an ES6 feature called generator.
redux-sagais a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, simple to test, and better at handling failures. ( from documentation )
Let’s get started with creating react app by using the create-react-app command
If above command is not working then install create-react-app first by using the following
npm install create-react-app
Now run the following commands to install redux and redux-saga :
$ cd redux-saga-demo
$ npm install --save redux redux-Saga
Now add a new file in the src directory called redux.js and create a reducer with three requests
In the redux.js we have one reducer and three action type :
- API_CALL_REQUEST here we are beginning the process of fetching the profile
- API_CALL_SUCCESS successfully retrieved the profile data
- API_CALL_FAILURE action will come in the process when API fail to fetch the profile data
Now add a new file in src directory with the name sagas.js:
Here you will see function* and yield which is new for redux-saga user
Generator Function ( function* ):
A function which can be exited and later re-entered, a sort of pause the function and then restarts it latter when you’re ready. We use when to pause the function and doesn’t stop another code from running
The expression is used to pause the function and give out a value, yield can also take in a value when we restart the function. yield is used to delegate to another outside generator function
watcherSaga watches for an action dispatch to store and trigger a function workerSaga()
workerSaga call for fetchProfile function and if the API request success, it sends the data to the reducer, else it sends the failure message to the reducer.
here yield is pausing the function till the fetchProfile is fetching the data from the API
Here we are using fetch to call the API. Fetch provide the interface for fetching resources( including across the network). Fetch provide the generic definition for request and response objects.
Now do the following changes to the index.js
Redux looks familiar to you:
- createStore, reducer, and Provider are from redux
- we are adding sagas middleware which is imported from redux-saga
- watcherSaga which we have created in our sagas.js file
- before running the saga, you must mount the saga middleware on the store using the applyMiddleware
Now do the changes to app.js
Connect the App with the store and add two function, mapStateToProps, and mapDispatchToProps.
mapDispatchToProps dispatches an action API_CALL_REQUEST to the store which calls on function onRequestProfile.
mapStateToProps returns the state of fetching, profile, error from the store which is available as props for the component.
We can use the props from in the app.js. Here we are using the props from the store.
Now add the snippets to the return of app.js to print the picture and profile name:
Add the fetching button and error message which show on failure.
I hope you will find this blog useful. Please comments to make it better.