Frontend

Hello everyone, in this article we are going to learn about proper use of redux saga, some effects of redux saga like put, call, take, takeEvery etc. Along with that we are going to separate saga files into watcher and worker for improving code readability. Let's create a simple react application with will render list of data on click of a button. Whenever user clicks on the button an endpoint is called and data is fetched from a remote server. We will use a sample endpoint provided by  reqres.in Finished application looks like below screenshot : Folder structure for this application will look like below: components : will have all the components we will use for the app components -> style : will have separate folder and file to hold the styling REDUX setup : constants  -> index : will hold all action types and constant values actions  -> index : will hold all the actions reducers -> index : is the root reducer reducers -> ot...

Have you missed Part 1 of this post, here is the  link Ok now let's create Saga file for gettingPostList : Saga/getPostListSaga.js import { call , put } from 'redux-saga/effects' import getPostListAction from '../Reducers/postListReducer' import getPostListService from '../Services/getPostsService' export default function* getPostList ( action ){ try { const response = yield call ( getPostListService ); yield put ( getPostListAction . getPostListSuccess ( response )); } catch ( err ){ yield put ( getPostListAction . getPostListFailure ()); } } After creating saga file we have to link saga with specific reducer in the RootSaga file Saga/RootSaga.js import { all , takeLatest } from 'redux-saga/effects' import { GetPostListTypes } from '../Reducers/postListReducer' import getPostList from './getPostListSaga' export default functi...

I presume that you already gone through the docs of redux-saga, reduxsauce ,so that I won't waste your time with lots of description. Let's start coding Init react app : npx create-react-app redux-saga-starter First we need to install the dependencies : npm i --save redux react-redux remote-redux-devtools redux-saga redux-logger reduxsauce seamless-immutable Install react router dependency for required routes : npm i react-router-dom --save So before adding redux/redux-saga my initial index.js , App.js and Router.js are as following : index.js import React from 'react' ; import ReactDOM from 'react-dom' ; import App from './App' ; ReactDOM . render ( < App /> , document . getElementById ( 'root' )); Router.js import React , { Component } from 'react' import { Route , Switch } from 'react-router-dom' import Home from './Components/Home/home' class...