Frontend

Hello everyone in this article we are going to take a look at how we can use redux with React Hooks. # What are React Hooks React Hooks are functions that let us hook into React State and lifecycle features from functional components. Using redux with react hooks conceptually is same as we use it in class components but syntax wise they are bit different To learn about this today we are going to create a simple ToDo List Application, here is a quick look Use create-react-app to initialise a react app and install dependencies  redux, react-redux You will have basic react app folder structure by now. So let's create the redux store import { createStore } from 'redux' ; const INITIAL_STATE = { data : [ 'Get up early' , 'Have Breakfast' , 'Start coding' ], }; function tasks(state = INITIAL_STATE, action) { switch (action.type) { case 'ADD_TASK' : return { ...state, dat...

At some point while learning React most of the people think whether React Context API is a replacement for Redux, we are often confused that when should we go for Context API and when should we go for Redux. Moreover what could be the pros and cons if we select each. So in this article we are going to compare React Context API and Redux also we will try to see when each are useful. What is Redux  According to definition, Redux is a predictable state container for Javascript applications. Redux helps us manage the state of the application. From react perspective React offers no solution which allows us to have a global state, so that we can share states among components. Redux solves this problem and it's a good fit for react. What is Context React Context API on the other hand , is a component structure provided by React framework which allows us to share specific forms of data across its children. When Redux can be replaced by React Context API  If we are...

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...