DEV Community: Abhirup Datta

Manage Cart State with Zustand

Abhirup Datta — Wed, 05 Mar 2025 16:03:33 +0000

Zustand, meaning “state” in German, is a lightweight state management library for React that offers an intuitive and efficient way to manage application state.

In this blog, I will setup a simple cart application in Zustand .
In Zustand, we store the state in a hook rather than a context (used in React-redux).

Let's see the code 😄
Note: I have used TailwindCSS for styling the UI.

After finishing, this is we will get this:

App.tsx

// Example static food items
import FoodItems from './FoodItems';
import ShoppingCart from './ShoppingCart';
import {Food} from './types';

const foodItems:Food[] = [
  {
    id: 1,
    name: "Burger",
    description: "Juicy grilled beef burger with fresh veggies",
    price: 5.99,
    image: "https://images.unsplash.com/photo-1568901346375-23c9450c58cd?q=80&w=2799&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    id: 2,
    name: "Pizza",
    description: "Cheesy pizza topped with fresh tomatoes and basil",
    price: 8.99,
    image: "https://images.unsplash.com/photo-1513104890138-7c749659a591?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    id: 3,
    name: "Salad",
    description: "Fresh mixed greens with a tangy vinaigrette",
    price: 4.99,
    image: "https://plus.unsplash.com/premium_photo-1701699257759-4189d01f4351?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    id: 4,
    name: "Pasta",
    description: "Creamy Alfredo pasta with grilled chicken",
    price: 7.99,
    image: "https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?q=80&w=2706&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
];
const App = ()=> {

  return (
    <div className="flex">
        <ShoppingCart />
        <FoodItems items={foodItems}/>
    </div>
  )
}

export default App;

Here, I have added some sample food items. This is passed as props to FoodItems.We will see how to add the items from FoodItems to ShoppingCart "magically" via Zustand.

cartStore.ts

import { Food } from '@/types';
import {create} from 'zustand';

type Sku = {
    item: Food,
    count: number,
}
type CartStoreState = { 
    cart: Sku[],
    addToCart: (food: Food)=> void,
    incrementDecrementSku: (foodId: number, type: 'increment'|'decrement', quantity?: number )=> void,
    deleteSku: (foodId: number )=> void,
    clearCart: ()=> void,
}


export const useCartStore = create<CartStoreState>((set)=>({
    cart: [],
    addToCart: (product)=> set((state)=> {
        const cart = state.cart;
        const isSameProductExists = cart.find(sku => sku.item.id === product.id);
        if(isSameProductExists){
            isSameProductExists.count += 1;
            return {cart:[...cart]};
        }
        return {cart: [...state.cart, {item: product, count: 1}] }
    }) ,
    incrementDecrementSku:(productId,  type, quantity = 1)=> set(state=> {
        const cart = state.cart;
        const productIndex = cart.findIndex(sku => sku.item.id === productId);
        if(productIndex !== -1){
            const updatedCart = [...cart];
            const currentSku = updatedCart[productIndex];

            if(type === 'decrement'){
                if(currentSku.count <= quantity){
                   updatedCart.splice(productIndex,1); // Remove the product if count reaches 0 or below
                }else{
                    currentSku.count -= quantity;
                }
            }else if(type === 'increment'){
                currentSku.count += quantity;
            }
            return {cart:updatedCart};
        }
        return {cart: cart }
    }),
    deleteSku:(id)=> set((state)=> ({cart: state.cart.filter(sku=> sku.item.id !== id)})),
    clearCart:()=> set({cart: []})
}));

The create function from zustand helps in creating a store .It takes a callback function with the first param which is a setter method 'set' and returns the state.
Here, the state has five items: cart, addToCart, incrementDecrementSku,deleteSku , clearCart .

FoodItems.tsx

import { useCartStore } from './store/cartStore';
import {Food} from './types';
import { Plus } from "lucide-react";

const FoodItems = ({ items }:{items: Food[]}) => {
    const {addToCart} = useCartStore();

    return (
        <div className="w-3/4 p-4">
          <h1 className="text-2xl font-bold mb-4 text-center">Food Cart</h1>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {items.map((item) => (
              <div
                key={item.name}
                className="border p-4 rounded-lg shadow-md flex flex-col items-center"
              >
                <img
                  src={item.image}
                  alt={item.name}
                  className="w-32 h-32 object-cover mb-4 rounded"
                />
                <h2 className="text-lg font-semibold mb-2">{item.name}</h2>
                <p className="text-gray-600 mb-2">{item.description}</p>
                <p className="text-green-500 font-bold mb-2">${item.price}</p>
                <button className="p-2 rounded-full bg-blue-500 text-white hover:bg-blue-600" onClick={()=>addToCart(item)}>
                  <Plus className="w-5 h-5" />
                </button>
              </div>
            ))}
          </div>
      </div>
    );
  };

export default FoodItems;

The FoodItems displays the item by looping over them and each item has a add button which calls the addToCart function of useCartStore.

ShoppingCart.tsx

import { Minus, Plus, ShoppingCart as ShoppingCartIcon } from "lucide-react";
import { useCartStore } from "./store/cartStore";

const ShoppingCart = ()=>{

  const {cart, incrementDecrementSku, clearCart, deleteSku} = useCartStore();

    return (<div className="w-1/4 p-4 bg-gray-100 shadow-md">
          <div className="flex flex-col items-center">
            <button className="p-4 rounded-full bg-gray-200 hover:bg-gray-300">
              <ShoppingCartIcon className="w-8 h-8 text-gray-700" />
            </button>
            <button className="p-2 rounded-full bg-gray-200 hover:bg-gray-300 mt-1" onClick={clearCart}>
              Clear All
            </button>
            <p className="mt-2 text-gray-700 font-semibold">Your Cart</p>
            {
              cart.map((sku)=>(
                <div key={sku.item.id}  className="bg-blue-200 p-2 px-3 rounded-lg m-2 min-w-full">
                  <div className="flex items-center justify-between gap-2">
                    {sku.item.name}
                    <QuantityControlButton count={sku.count} 
                    decrementBy1={()=> incrementDecrementSku(sku.item.id,'decrement')}
                    incrementBy1={()=> incrementDecrementSku(sku.item.id,'increment')}
                    />
                  </div>
                  <button className="border border-red-500 p-1 rounded-md" onClick={()=> deleteSku(sku.item.id)}>Delete</button>
                </div>
              ))
            }
          </div>
        </div>)
}

export default ShoppingCart;

type QuantityControlButtonProps = {
  count: number;
  incrementBy1: ()=> void;
  decrementBy1: ()=> void;

}
export const QuantityControlButton = ({count, decrementBy1, incrementBy1}:QuantityControlButtonProps)=>{
  return (
    <div className="flex items-center justify-between border-2 gap-4 border-yellow-500 p-1 rounded-3xl">
     <Minus size={16} onClick={decrementBy1} className="cursor-pointer"></Minus>
     {count}
     <Plus size={16} onClick={incrementBy1} className="cursor-pointer"></Plus>

    </div>
  )
}

In the ShoppingCart, we are adding/removing/deleting items from the cart.

Overall, Zustand helps us to write state management code in a leaner way compared to React-redux.

Facade Pattern

Abhirup Datta — Mon, 09 Sep 2024 16:36:46 +0000

Facade pattern is relatively a simple design pattern to understand and heavily used in actual code.
The word "Facade" means "the principal front of a building, that faces on to a street or open space."

What and why Facade Pattern ?
With the Facade pattern you can take a complex subsystem and making it easier to use by implementing a Facade class that provides a single but more reasonable interface.

Example
Consider , you are designing a smart home system where your home can have subsystems like lights, thermostat, security system etc which controls various parts of your house.
Now, if you have to turn on/off these systems when you arrive or leave the house you have to manually do this things.
You can get rid of these manual (and repeated) tasks by the a help of a Facade (or a butler) who will internally call these methods and you will just call a single function of this Facade.

Code snippet 1

// Subsystems
class Light {
    turnOn() { console.log("Lights are on"); }
    turnOff() { console.log("Lights are off"); }
}

class Thermostat {
  setTemperature(temp: number) { 
    console.log(`Temperature set to ${temp}°C`); 
  }
}

class SecuritySystem {
    arm() { console.log("Security system armed"); }
    disarm() { console.log("Security system disarmed"); }
}

// Facade
class SmartHomeFacade {
    private light: Light;
    private thermostat: Thermostat;
    private security: SecuritySystem;

    constructor() {
        this.light = new Light();
        this.thermostat = new Thermostat();
        this.security = new SecuritySystem();
    }

    leaveHome() {
        this.light.turnOff();
        this.thermostat.setTemperature(18);
        this.security.arm();
        console.log("Home is set to 'Away' mode");
    }

    arriveHome() {
        this.security.disarm();
        this.light.turnOn();
        this.thermostat.setTemperature(22);
        console.log("Home is set to 'Welcome' mode");
    }
}

function test(){
    //  Client code
    const smartHome = new SmartHomeFacade();
    smartHome.leaveHome();
    console.log("---");
    smartHome.arriveHome();
}
test();

Output

Code for this and other patterns can be found here: https://github.com/abhidatta0/Essential-design-patterns-in-Typescript

Lets explain the code

Light , Thermostat, SecuritySystem : these are three utilities which we are controlling in our house.The code for these is not much relevant to understand for the purpose of this blog.
SmartHomeFacade: this class acts as the Facade between client and the 3 classes above and helps to control them internally. The client only calls the methods of the facade class.

In the test function, we just invoke leaveHome and arriveHome methods of the SmartHomeFacade function and it will take care of the rest!

Note:
Another benefit of using Facade class is it decouples a client from the subsytems. For e.g: if the method name is changed in Light class , we only need to make change in the SmartHomeFacade class .The client code remains as it is!

That’s it 😅

Code for this and other patterns can be found here: https://github.com/abhidatta0/Essential-design-patterns-in-Typescript

Adapter Design Pattern

Abhirup Datta — Sun, 04 Aug 2024 03:31:44 +0000

This is part of the design pattern series in Typescript

What and why adapter pattern is needed ?
The adapter pattern converts the interface of a class into another interface the client expects.Adapter lets classes work together that couldn't otherwise because of incomparable interfaces.

Ok, that's a lot of jargon so lets break it down 🔨.

Example
Generally, we have two types of mobile charging ports - USB C and MicroUSB (or USB B).Their interfaces (port structure) are different.

Now, suppose you have a phone with MicroUSB port but you dont't have its cable, but you have a USB C cable. So what you do ?
You will get an adapter which lets you "convert" USBC to MicroUSB.

Code Snippet 1

   function charge( usbc: USBCCharger){
     usbc.chargeByUSBC();
   }

Here are four conceptual terms that we will need to know:

Adapter: The connector which helps to adapt (or connect).
Target: A class which will be converted from. In the code snippet 1, USBCCharger is the target.
Client: Someone (the user) using the Target class . In the code snippet 1, function charge is the client.
Adaptee: The class whose methods will actually be called by the adapter.

Code snippet 2
Let us define a USBC class which has a charge method.

class USBCCharger{
    chargeByUSBC(){
        console.log("charging by USBCCharger")
    }
}

Code snippet 3
Let us define a MicroUSB class which also has a charge method.

class MicroUSBCharger{
    chargeByMicroUsb(){
        console.log("charging by MicroUSBCharger")
    }
}

Code snippet 4
Now, the adapter class which targets USBC charger so we can invoke charge (of Code snippet 1) by using MicroUSBCharger as an adaptee
can be written as:

class USBCAdapter implements USBCCharger{

    private usb:MicroUSBCharger;
    constructor(usb: MicroUSBCharger){
       this.usb = usb;
    }

    chargeByUSBC() {
        // can do conversions if needed etc.
        this.usb.chargeByMicroUsb();
    }
}

Code snippet 5
Here is the test code to test the Adapter pattern
Test

function charge( usbc: USBCCharger){
   usbc.chargeByUSBC();
}

const usbC  = new USBCCharger();
charge(usbC);

const microUsb = new MicroUSBCharger();
const adapter = new USBCAdapter(microUsb);
charge(adapter);

Output

Code for this and other patterns can be found here: https://github.com/abhidatta0/Essential-design-patterns-in-Typescript

Lets break down the USBCAdapter class (Code Snippet 4).

class USBCAdapter implements USBCCharger -> The class USBCAdapter implements USBCAdapter because this is what the client charge of code snippet 1 expects
constructor(usb: MicroUSBCharger) -> Here while creating an instance of USBCAdapter we need to get the reference of the object we are adapting (in this example MicroUSBCharger)
chargeByUSBC method -> Now we need to implement all the methods of the target class (USBCCharger) and translate them to adaptee class(MicroUSBCharger)

Note
Don't think of the Adapter class simply as a wrapper over Adaptee class.It is for the purpose of converting the interface of a class into another interface the client expects.

The adapter pattern is a widely used design pattern in software engineering.It is often used when working with a legacy class and adapt it to a new class.

That’s it 😅

Code for this and other patterns can be found here: https://github.com/abhidatta0/Essential-design-patterns-in-Typescript

Singleton design pattern

Abhirup Datta — Sun, 04 Aug 2024 03:30:48 +0000

This is part of the design pattern series in Typescript.
Code for this and other patterns can be found here: https://github.com/abhidatta0/Essential-design-patterns-in-Typescript

Why singleton is needed ?
There are some cases where we need to ensure only one instance of a class exists.
e.g: Thread pools, Caches, Settings.

Singleton Pattern ensures a class has only one instance, and provides a global point of access to it

Example
We know, every school has only one headmaster(or principal).
Irrespective of the situation , where the headmaster is called it should return the same person (or in code "instance").
Code

  class Headmaster{
    static uniqueInstance: Headmaster;
    public readonly name = "Albert Einstein";

    private constructor(){}

    static getInstance(): Headmaster{
      if(!Headmaster.uniqueInstance){
        Headmaster.uniqueInstance = new Headmaster();
      }
      return Headmaster.uniqueInstance;
    }
}

Let's break it down and explain.

static uniqueInstance: Headmaster -> This is a static variable to hold our one instance.
public readonly name = "Albert Einstein" -> This is a property of the instance. For singleton, every object will have same property values. readonly so it cannot be modified from outside.
private constructor -> Our constructor is made private ; only class itself can instantiate this class!
static getInstance(): Headmaster-> This is a static method which returns a instance of Headmaster class.We first check if the uniqueInstance is null or not.
- If uniqueInstance is null, we first create it via the private constructor and assign it to the uniqueInstance.
- If uniqueInstance isn't null , then it was previously created. We just fall through to the return statement.

Testing

const hm1 = Headmaster.getInstance(); //  instance 1
const hm2 = Headmaster.getInstance(); //  instance 2

console.log(hm1 === hm2); // will print true

Output:

Eager vs Lazy creation
If your application always creates and uses an instance of the Singleton class or the overhead of instance creation is not much, you may want to create the Singleton eagerly.

"Eager" means the instance will be created at the time of class creation in runtime.
This will require slight modification of above code.

class Headmaster_Eager{
      static uniqueInstance: Headmaster_Eager = new Headmaster_Eager();   

      ...
      ...

    static getInstance(): Headmaster_Eager{
      return Headmaster_Eager.uniqueInstance;
    }
}

Here , no need to check if uniqueInstance is null or not in getInstance() method.

However, the eager way should be followed only if the object is always needed in your creation, otherwise it will waste memory.

That’s it 😅

Code for this and other patterns can be found here: https://github.com/abhidatta0/Essential-design-patterns-in-Typescript

Culture vs Free Food

Abhirup Datta — Tue, 28 Feb 2023 15:34:10 +0000

Disclaimer: Ok, I know the title seems clickbaity but I want as many people to read it.

What is culture or more specifically Company culture?
I found a pretty practical definition of the term in this website
https://www.greatplacetowork.com/resources/blog/company-culture-meaning-benefits-and-strategies

"Company culture is how you do what you do in the workplace. It’s the sum of your formal and informal systems and behaviors and values, all of which create an experience for your employees and customers."

In short , it is the soul of the workplace.

So, here we go:
Often times I have seen people(mostly) run behind certain companies just for the purpose of showing off or fancies like getting free food.

But for the long term success of an individual in the company it is often the culture of the company.
Unfortunately, the culture is a very abstract thing which is not immediately visible outside the company.But it can truly only be known from people already working in the company.

Here is a reason (and a secret) why some companies believe in free food and giving out stuffs - It is less about employee benefit and more about marketing and PR.
And the best evidence to this is the recent layoff news , those companies have started laying off their employees.

Now why this happen?
The money which is spent in providing this free food etc is ultimately coming from the company profit which gets dried up in bad times.
But a good culture can sustain any environment without losing any money.Although maintaining a good culture is very hard and simultaneously also hard to recover once damaged.

To quote : "A good culture eats free food for breakfast".(No pun intended!)

Add custom fonts (Google Fonts) to React native(>= 0.70)

Abhirup Datta — Sun, 25 Sep 2022 14:24:00 +0000

Here, we will know how to add custom fonts to our react native app.

Go to Google Fonts website and select the font family (e.g: Montserrat)
For a particular family, we can select multiple styles (e.g: Montserrat-Regular, Montserrat-Bold).After selecting, we click the "Download family" to download the font in a zip.

We extract the zip file and inside the static folder, we will get a list of styles with extensions .ttf . We copy the required fonts and create a folder in our react native project: PROJECT ROOT/assets/fonts and paste the .ttf files there.
Inside our project root create a file: react-native.config.js and paste the following, to let know react-native where to get the fonts from.

module.exports = {
    project: {
        ios:{},
        android:{}
    },
    assets:['./assets/fonts/'],
}

One more step before starting your app build, you need to link the asset, using npx react-native-asset (enhancement over react-native link). This will automatically create assets/fonts folder (for android) and make a custom font entry in Info.plist (for ios).
Now, you can create a text style, by adding the newly added font.

const styles = StyleSheet.create({
  title:{
    fontFamily: 'Montserrat-Regular',
  }
})

Results:
Before

After

Understanding HOCs in React (in Typescript)

Abhirup Datta — Tue, 23 Aug 2022 14:37:00 +0000

HOC stands for Higher-Order Components.
It means a component which takes in another component and returns an enhanced component.

const HoC = Component => EnhancedComponent

The primary use case of HOC is to have a single place to sharing functionalities between components.
(Think of HOC more like a function, than component, this will be more clear as we go.)

Suppose, you have a requirement to calculate the innerWidth of browser viewport as it is resized and then do some computations/ui change.

For our example, we just want to display the window.innerWidth in "realtime".

To achieve this we can write a functional component and use the useEffect hook and attach a listener function which will update a state variable.
See code: https://github.com/abhidatta0/react-hoc-in-typescript/blob/master/src/ResizeComponent.tsx

Now, suppose we have to use this logic in another component.In that case, we have to duplicate our logic 😞 (which is obviously bad).

What could be a better(or best) way?
We can just abstract away this useEffect and listener code into another component and expose the innerWidth variable as a prop.
This "special" component is our Higher-Order Component.

withResize.tsx

const withResize = (Component: FC<any> )=> (props: any)=> {
    const  [innerWidth, setInnerWidth] = useState(0);

    const handleResize = ()=>{
     setInnerWidth(window.innerWidth);
    }

    useEffect(()=>{
     window.addEventListener('resize', handleResize);

     return ()=>{
       window.removeEventListener('resize', handleResize);
     }
    },[]); 

    return <Component {...props} windowInnerWidth={innerWidth} />
}

WithResizeUsage.tsx

const WithResizeUsage = ({name, windowInnerWidth}: {name: string, windowInnerWidth: number})=>{
    return (
        <div>Inner Width is {windowInnerWidth} and name is {name}</div>
    )
}

export default withResize(WithResizeUsage);

App.tsx

  <WithResizeUsage name="Developer" />

Let's analyze what we have written

In App.tsx, we call WithResizeUsage with a name prop.
withResize is an hoc, which takes in a Component which itself accepts some props.
The return of withResize is a component with all its original props and the extra windowInnerWidth prop.
In WithResizeUsage: we accept the name prop that we get from App.tsx and the windowInnerWidth that we get from withResize hoc.
In WithResizeUsage, we wrap it with withResize in the last line withResize(WithResizeUsage) to bind it with withResize.

See code:
https://github.com/abhidatta0/react-hoc-in-typescript/blob/master/src/withResize.tsx

https://github.com/abhidatta0/react-hoc-in-typescript/blob/master/src/WithResizeUsage.tsx

Notice how clean our WithResizeUsage component becomes.

Let's look at how we can enhance the HOC a bit more.
Suppose, we need that that the displayed window.innerWidth is x amount more and x value will be configurable.If inner width is 90 and x is 3, we will display 93.

We will modify the HOC by adding another level to accept additional params.(This concept is called function currying)

withResizeAdvanced.tsx

type Params =  {
  bumped: number;
}
const withResizeAdvanced = (params: Params)=> (Component: FC<any> )=> (props: any)=> {
    console.log(params);
    const  [innerWidth, setInnerWidth] = useState(0);

    const handleResize = ()=>{
     setInnerWidth(window.innerWidth+params.bumped);
    }

    useEffect(()=>{
     window.addEventListener('resize', handleResize);

     return ()=>{
       window.removeEventListener('resize', handleResize);
     }
    },[]); 

    return <Component {...props} windowInnerWidth={innerWidth} />
}

withResizeAdvancedUsage.tsx

import withResizeAdvanced from "./withResizeAdvanced";

const WithResizeUsage = ({name, windowInnerWidth}: {name: string, windowInnerWidth: number})=>{
    return (
        <div>Inner Width is {windowInnerWidth} and name is {name}</div>
    )
}

export default withResizeAdvanced({bumped: 5})(WithResizeUsage);

App.tsx

      <WithResizeAdvancedUsage name="Developer"/>

Everything is similar to earlier HOC, except we can pass a object which has a property bumped can we use to modify the innerWidth.

If we put earlier and the new component in App.tsx, we can visualize that for the later one, innerWidth is incremented by 5.

Github repo: https://github.com/abhidatta0/react-hoc-in-typescript

Note:

Make sure HOC have the general logic (like getting window.innerWidth) will be reused across other components.
An alternative to HOC pattern for function component is to use custom hooks.

Javascript Symbol

Abhirup Datta — Sun, 19 Jun 2022 13:12:05 +0000

A symbol is a primitive data type in Javascript, introduced in ES6.
A symbol is created using the Symbol constructor.The string is optional.

let sym1 = Symbol('xyz');

One important behaviour of symbol it return a unique value.
So, the below code will log false

let sym1 = Symbol('foo');
let sym2 = Symbol('foo');

sym1 === sym2;  // false
typeof sym1;    // symbol

Note: using the new operator will throw a TypeError. This is called incomplete constructor.

let sym = new Symbol('foo');

Uncaught TypeError: Symbol is not a constructor

When symbol-ed keys are used in object, using for...in will ignore those keys. Even they would be ignored by Object.keys, but Object.getOwnPropertySymbols function can be used to get these.

let obj = {};

obj[Symbol('foo')] = 'a'
obj[Symbol.for('bar')] = 'b';
obj['c'] = 'c';
obj.d = 'd';

for(let i in obj){
   console.log(i);   // logs c,d
}

Object.keys(obj);     // ['c', 'd']
Object.getOwnPropertySymbols(obj);  // [Symbol(foo), Symbol(bar)]

Symbol.for and Symbol.keyFor

Symbol.for(string) is a function that checks for a symbol in the Global Symbol Registry(GSR) and returns it. If not present, it creates and returns it.

Symbol.keyFor(symbol) function is used to retrieve the identifier of the symbol, created using Symbol.for.

const foo1 = Symbol.for('foo');  // this one is created
const foo2 = Symbol.for('foo');  // retrieve the already created one
const bar = Symbol.for('bar');   // this one is created


foo1 === foo2;    // true
foo1 === bar;     // false
Symbol.keyFor(foo1)  // "foo"

const empty = Symbol.for();
console.log(Symbol.keyFor(empty));  // "undefined" (string)

Note that, since Symbol.keyFor retrieves symbol from GSR, symbol created by the Symbol constructor is not accessible by keyFor and hence return undefined.

const Jam = Symbol('jam');
console.log(Symbol.keyFor(Jam));   // undefined

Usage in React

Symbol can be used in trigger change detection, generally used in useEffect.

const [key, setKey] = useState(Symbol());

const changeKey = ()=>{
  setKey(Symbol());   // new value is set
}

useEffect(()=>{
  // anything to run on change of "key"
},[key]);

Tagged functions / Tagged templates

Abhirup Datta — Wed, 15 Jun 2022 03:32:48 +0000

According to MDN docs
Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.
Let's explore more here.

const age = 20;
function name(...args){
  console.log(args);
}
name`My Name is ${age}`

This outputs

So, we see the arguments of the tagged template name is an array which contains the string literals as an array as first element and the remaining arguments are related to the expression.

This abilty of processing, enables powerful features like the
Styled component syntax.

Let us see an example.
Suppose we have template string which has some expressions bounded in one div and we want to separate out each expression in their own divs.

For this we can write a tagged template which return the processed string and then we can use document.body to put it on DOM.

Here is the code
https://jsfiddle.net/abkhfmtz/21/

One pitfall to remember

Because tagged template can parse unicode representation, a invalid unicode will print undefined.

function name(stringExps){
   console.log(stringExps);
}

name`\u00A9`
name`\xA9`
name`\unicode`

Template literals in Javascript

Abhirup Datta — Tue, 14 Jun 2022 03:58:19 +0000

A sample template literal

const x = `This is template literal`;
console.log(x);

Which will print

Template literal is mainly used in two ways

String interpolation
Tagged functions or Tagged templates

In this blog, we will discuss about String interpolation.

const human = {
   age: 28,
   country: 'India'
}
const intro = `My age is ${human.age} and I am from ${human.country}`;
console.log(intro);

We are interpolating the name and age property of human object.

If we try to use single quoted(or double quoted) strings we have to write this:

const intro = 'My age is '+human.age+' and I am from '+human.country;

We can write any javascript logic between the ${ }.

This enable us to write easily understandable logic.

const human = {
   age: 28,
   country: 'India'
}
const intro = `I am ${human.age > 20 ? 'adult' : 'juvenile'}`
console.log(intro);

The equivalent of writing this in single quote

const human = {
   age: 28,
   country: 'India'
}
const intro = 'I am '+ ( human.age > 20 ? 'adult' : 'juvenile' );
console.log(intro);

String interpolation can be useful in React JSX when writing conditional className.
Suppose, we want to apply btn-highlight when the button is to be highlighted and btn as a normal button. We can take the btnas a common word and append -highlight as per condition.

Some less known features in Chrome Devtools

Abhirup Datta — Wed, 02 Mar 2022 05:18:00 +0000

Here we will be exploring some less known features which I recently came to know about chrome devtools and I thought about sharing them.

[Currently, I am using Chrome 98, to check your version go to chrome://settings/help].

If you come across some more features, please add them in the comments.

More devices

Chrome gives us ability to add more devices to test our webpage on.
Go to Settings -> Devices -> check/uncheck to add/remove devices.

Web accessibilty

Accessibility of a particular element (e.g: h1,p etc.) can be known by clicking on the "Accessibilty" tab on the elements tab.

Network tab Preserve Logs - To save requests across page loads, check the Preserve log.

Disable cache - By checking this box, we can more accurately emulate a first-time user's experience, because requests are served from the browser cache on repeat visits.

That's it. Ciao!

Adding slices, reducer,actions and finishing up!

Abhirup Datta — Sun, 20 Feb 2022 13:45:07 +0000

Our slice to handle our fruits state will be:

import {createSlice} from '@reduxjs/toolkit';

const initialState = {fruits: []};

const fruitsSlice = createSlice({
    name: 'fruits',
    initialState,
    reducers:{
        addFruit(state, action){
            console.log(action);
            state.fruits = [...state.fruits, action.payload];
        }
    }
});

export const {addFruit} = fruitsSlice.actions;
export default fruitsSlice;

We can dispatch an action to update the addFruits reducer by calling it with the same name action.

const addFruitHandler = ()=>{
   setError(null);
   if(fruitName.length > 0 && Number.isInteger(fruitCount) && fruitCount > 0){
            console.log(fruitName, fruitCount);
            dispatch(addFruit({fruitName, fruitCount}));  //dispatching action
   }
   ......
}

Lets breakdown what happening,

Our fruits slice is created from createSlice function provided by the RTK library.
createSlice accepts an object with three mandatory properties: name, initialState, reducers.
- name is used when dispatching an action.(more on this later).
- initialState is the initial state that this reducer will have.In our example, I have given an initial state.
const initialState = {fruits: []}

Note: Use null if we want to set initialState as empty.
- reducers is an object containing Redux "case reducer" functions.It will have one or more actions depending on our application requirement.Here,I am creating one action addFruit to add a fruit object to our existing fruit list.
Finally, we are exporting the actions of this slice and the fruitSlice.

We will now link the reducer from fruitsSlice in our store.

We can architect our code better by extracting out the actions in its own file.
Create a folder actions in our src folder and add a new file fruits.js inside it.

Let us take a deep look at the name of the slice and dispatch code inside AddFruit.js

dispatch(addFruit({fruitName, fruitCount}));

Here, we are dispatching an object with fruitName and fruitCount.
By default, the action object of addFruit reducer will be
{type: "fruits/addFruit", payload: {fruitName: 'peach', fruitCount: 1}.
Type is formed by <slice name>/<action name>
and payload is the parameter we pass in the dispatch function.

There is a bit of issue in the way we are dispatching our fruit name and count.
We have to make sure other components also dispatch with same object structure({fruitName:'',fruitCount:''}) which is a bad practice.
For that we create a custom payload by modifying our slice action,

const fruitsSlice = createSlice({
    ....
    reducers:{
        addFruit:{
            reducer: (state, action)=>{
                state.fruitList = [...state.fruitList, action.payload];
            },
            prepare: (name, count)=>{
                return {payload: {name, count}};
            }
        }
    }
});

and our dispatch will now simply be

dispatch(addFruit(fruitName, fruitCount));

The prepare method can accept any paramaters and returns a custom payload.

Now, we will be consuming the fruit list from our fruits state in FruitList component.

That's it!

The final application can be found here:

https://github.com/abhidatta0/fruits-logger-redux-toolkit

The complete code can be found here:

https://github.com/abhidatta0/fruits-logger-redux-toolkit