DEV Community: Sankalpcreat

Redux State Management Library

Sankalpcreat — Tue, 12 Sep 2023 05:21:26 +0000

First of All thanks to Dan Abramov for creating Redux which is wonderful for state management as well as UI/UX binding which enhances App performance.

Why redux? what is that makes redux better in case of normal react application.

Without Redux each components of state management handles the user input and manages its own state.some time it share with props with other that rely on data change.But here comes a difference if there are only components having parent child relationship with the state management components then funda is clear logic is clear about that no issue because its simple hierarchy model which is present child and parent relationship.

Know here comes the catch which is when these state management has to share data with other many components in the applications through it then there is one problem that come into account that is Props drilling.

What is Prop drilling

here in above image i have show how prop drilling works initially we have 3 function loginpage.js,Dashboard.js,profile.js
We know that loginpage is parent of both in prop-drilling parent transfers its data to child and child transfer its data to its child due to this process if the application is large enough then this hierarchy model will fail.

How redux handles its data flow due to large and complex structure of application

Here is gif in above example how it handles the complex data flow model threw it.
How from state it goes to UI and then after UI structure
in this UI first it will go to the event handler for this it has to do some even task which is deposit.From Eventhandler it will dispatch the Action which contain the key and data in from of map gies to store this is cyclic process which handles the data flow control.

Redux vs Redux-Tool kit

Sankalpcreat — Wed, 16 Aug 2023 03:47:31 +0000

As we know in recent time how react is growing popularity in Tech Industry.Today we will be discussing about redux and its tool kit how ,when,where to use and differences how redux-tool kit helps redux to enhance the Application.

What is Redux?

Redux is react popular state management library that handles state change thanks to Dan abramov for redux that makes our job easier and simpler to manage the state change.
Redux follow the Flux architecture and also follows centralized storage management.

Redux ToolKit

Redux toolkit is simplified package that helps the Redux flow.
Redux has lot of boilerplate code while writing Like define actions,writing the reducer.

Lets see the difference in code base when we use redux and when we use redux tool kit .Let take an example for counter using redux

Counter Using Redux

const Increment='Increment'
const Decrement='Decrement'

const increment= () =>({type:Increment })
const decrement = () =>({type:Decrement})

const counterReducer = (state=0,action) =>{
switch(action.type){
case Increment:
  return state+1;
case Decrement:
  return state-1;
default:
return state;}
);
const {createStore}=Redux;
const store=creatStore(counterReducer);

store.dispatch(increment());
console.log(store.getState());

store.dispatch(decrement());
console.log(store.getState());

Counter Using Redux-ToolKit

import {createSlice,configureStore} from '@reduxjs/toolkit'
const counterSlice=createSlice({
name:'counter',
intialState:'0',
reducer:(
increment:(state)=>state+1,
decrement:(state)=>state-1,
},
});
const store=configureStore({reducer:counterSlice.reducer});
store.dispatch(counterSlice.action.increment());
console.log(store.getState());

store.dispatch(counterSlice.action.decrement());
console.log(store.getState());

From the above notation code we can get to know the boilerplate code for redux when we have to initialize the state management but in redux toolkit we have in-build library of redux

Advantages of Redux-ToolKit

Reduce boilerplate code
Immutability Handling
Devtools Integration

When to use Redux

Advance use cases- In case if you are using Middleware,custom enhancer,manual control.
Existing Redux codebase- we can use redux if code base is already existing because shifting of codebase makes problematic.

Next js next boom in 2023

Sankalpcreat — Sat, 29 Jul 2023 05:32:09 +0000

Next js is getting more popular day by day as it get more Server Side rendering in coming 2023 year .As technology growing more users are using Mobile Web which is gaining more popularity in industry

One more thing We can use Reactjs with Next-Js as next js is javascript open-source framework .After this scene Nextjs growing more popularity than reactjs.

Next-js is Reactjs_ Framework which is growing day by day

Everybody will have question that Why NEXT JS if we have react js already
the answer to that is NEXT JS has some special In build function which helps to enhance Server Side Rendering and statical generation of web-pages .

Why Developer are loving NEXT-JS

Typescript support-We know that typescript is better than vanilla Javascript because it in typescript error can be easily handle.

SSR(SERVER SIDE RENDERING) server side rendering is becoming better day by day as refresh rate is increasing.

3.**Code Spitting **As we know in 2019 we use webpack and rollup for code spitting but know next js is used which will manage codespitting .

4.Create React-app -Dan abramov I am really sorry about Create-react-app how hard work you have done in building this feature now next js has come to replace because it cause lot of error.Now your facebook team also replace that with next js official documentation.

Typescript advance Concept

Sankalpcreat — Sat, 22 Jul 2023 05:55:07 +0000

In this Blog we will be understanding some advance concept of typescript how union ,tuples and intersection generics and all other work in typescript
These are the special usage that make typescript better than Javascript as they can be reused again and again

Firstly I will be discussing about is Union in typescript.Often sometime when you do building your project there is always some kind of doubt that what this function going to return and is this is a Sting ,number or undefined to solve this problem we use union it is denoted by symbol | this helps you to see the return type of the function

const person =(name:string|NULL)

Here above code satisfy that name can be either a string or a NULL value with help of this we are not sure whether to give a string or NULL value so we start usage of Union which helps us to solve the doubt about that.

Next topic which we are going to brief about is tuples .Tuples plays an import role when we have to give lot of types for the given data like if we want to give data in bulk then we need to define an array which store the value for the types they return .

var data:[string,number];
data=['Jack',3];
data=['Mick',5];

Here above code snipped we can see that there is data variable which has return type of string and number these are again and again used for the string value like jack mick .One thing that we need to keep in mind that order of types should be same that if you have given string first you have to give string first at the time of calling that type

Here generics plays a very vital role when there is defined all kind of function It can be initialize like <> these to bracket any type inside the bracket

const inti=<T>(arg:T) =>{
return arg;}

above code base here we use generics which use generics of type T can be any either string,number etc that typescript compiler can detect by itself so return arg can return any things like string,number,boolean depending upon the case passed

How Typescript differ from Javascript

Sankalpcreat — Mon, 17 Jul 2023 10:17:26 +0000

In this small section we will be exploring typescript advantages over javascript how it can be used for the better development purpose.
Types Mostly Typescript contains some special keyword like Number,String,Boolean but some are very import as they might cause an lot of bug in code like Any and Never these two keyword makes hell if you don't use them carefully many developer face problem with any and never keyword as Typescript is Type defined language so to be precises we have to used these data carefully what they are return value etc.

Javascript :
let value=32134;
Typescript 
let value:number=32134;

Disclaimer not to use any
let us take an example

let hero 

function gethero(){
return "gfg";
hero=gethero()

In above example typescript will automatically detect the return type and it will show us any this means no type is define so by default it will take any as type so this value can be changed if any keyword is define it can be boolean ,number ,string any thing this may create a havoc in your code so be careful while using any keyword in your code.

In the next section we will learn about how to use typescript in your defined function lets say

function data(email:string){
 email.toUpperCase();

Let us take the above example in that we have taken a function which will take parameter as email and that to is defined as string that is new thing that we have introduced in Typescript,which was not in javascript
If you want to return type of function

function data(email:string):boolean{
return true;

Here we have defined the return type of function data which has return type of boolean so it will return the true and false value

In this section we will be learning Interface how to use? where to use? when to use ?

interface User{
name:string;
id:number;
above18:boolean

this is an interface defining to use the and define various data and the object inside it with single name if User which can be further used

const value:User{
name:"bet",
id:52,
above18;true,

This is the way how to use interface with the object value by use of previous data

There is lot of discussion in the Tech industry that where to use interface vs type
We can use both of them but there is problem if you want to add more data in type it will give error but on the other side interface it will not give you error.That means interface can be extended

One more major Advantage of type over interface is that it can be used as union,tuples and primitive this section will be covered in next blog

Now here comes the important points where to use interface and where to use types
Interface

if new object need to bed defined Type
When your need is to define tuples,primitive and union
if you are using map type function to take the value

some important topics like Generics,tuples,primitive usage of typescript in abstract class

Bellman ford algorithm

Sankalpcreat — Tue, 20 Jun 2023 09:33:20 +0000

Bellman ford algorithm mainly used to find the shortest path in graph but today i will try to implement with real world example some of other algorithm like*Dijkstra Algorithm* which is also use to find the shortest path but some limitation are there in Dijkstra Algorithm like it fails when there is directed graph , edges is negative to make sure Bellman ford algorithm works completely fine

Let us take a daily life example suppose you went to hill station and you chose a elevation feature in your map now from going up to down it will show negative value so here dijkstra fails to find the shortest path

Let us take an example for this

I have taken an directed 6 location A,B,C,D,E,F and there weight(distance) is negative as well as positive so to find the minimum distance bellman ford algorithm

Now from above picture we are clear with the edges and the path of destination and source as well as weight(distance)

For calculating the shortest path there is formula for it
but first we have to create a distance vector and mark source A as 0 and other as ∞(infinity) because we don't know the exact distance(weight)

Now after taking distance array we need to write formula for it and iterate upto N-1 N(represent edges) times that is difference between the bellman ford and dijkstra algorithm formula for both the algorithm is same but that N-1 iteration makes a difference between both
formula for Bellman ford algorithm is

to use this formula first make a table of source destination and distance between two

after forming these two table do the first iteration and change the distance array from infinity to the value you will see that after first iteration B-5 ,C-3,D-6,E-3,F-2
then after second iteration distance are changed

after N-1 iteration the answer for the distance array will be
A-0,B-5,C-3,D-1,E-3,F-2

JavaScript Deprecated list

Sankalpcreat — Fri, 16 Jun 2023 14:35:13 +0000

As we know how javascript is evolving day by day new library are coming every year but mostly 3 library/framework are dominating the dev community. React ,Vue , Angular Javascript most popular libraries/framework. Deprecation typically occurs for various reasons, such as improving language consistency, enhancing performance, or addressing security concerns. When a feature is deprecated, it means that it is still available for use, but developers are encouraged to migrate to the recommended alternatives to ensure compatibility with future versions of the language.

1-Deprecated String functions: The String.prototype.anchor(), String.prototype.big(), String.prototype.blink(), String.prototype.small(), String.prototype.strike(), and String.prototype.sup() methods are deprecated

2-Deprecated Function properties:The Function.prototype.arguments and Function.prototype.caller properties are deprecated

3-Deprecated Function constructor:Using eval() with untrusted code can lead to code injection vulnerabilities.

4-Deprecated escape() and unescape() functions: recommended to use encodeURI(), encodeURIComponent(), decodeURI(), and **decodeURIComponent() **functions instead.

eval() Function:

//Previous
eval('console.log("Hello, World!")');


//New way

console.log("Hello, World!");

Function Constructor:

//Previous
var multiply = new Function('a', 'b', 'return a * b;');


//Modern way
var multiply = (a, b) => a * b;