Forem: Hardeep Singh

Practical use of array.reduce() in JavaScript

Hardeep Singh — Wed, 01 Sep 2021 18:03:10 +0000

Definition

The reduce() method executes a reducer function for each value of an array. reduce() returns a single value which is the function's accumulated result.

How reduce works:

var numbers=[10,20,30];

var sumofAllNumbers=numbers.reduce(function(sum,number){
    return sum+number;
},0);

console.log(sumofAllNumbers);

reduce() has two parameters

reducer/iterator function e.g function(sum,number)
Initial value 0 in this case (optional)

reduce() method will iterate over each number and add it to sum variable as shown in example.
*initial value=0
*iteration 1 : sum=10
*iteration 2 : sum=30
*iteration 3 : sum=60
*return 60 to sumofAllNumbers variable

Practical Example

To Balance Parenthesis

For example : Following are valid parenthesis

()()()
((()))

Invalid parenthesis

(()))
)()

function balanceParenthesis(string) {
    if (string.length > 0) { // Check input is valid string 
        return string.split("")
            .reduce(function(counter, char) {
                if (counter< 0)// special case when we have ) at start
                    return counter;
                if (char === "(")
                    ++counter;
                else
                    --counter;
                return counter
            }, 0);//counter as initial value
    }
    return -1;
}

//if functions return 0 then Parenthesis are balanced
if (balanceParenthesis("()()()") == 0)
    console.log("Parenthesis are balanced")
else
    console.log("Parenthesis are not balanced")

First we converted provided input to array using string.split("")
Then we applied reduce function to iterate over each character

In reduce method we checked if character is '(' then we increased counter value by 1
other wise decreased the value by -1 for ')'

Special check if(counter< 0) added to check cases like ")(" as we will have counter value 0 in this case

So in result if the counter value is 0 then parenthesis are balanced otherwise these are not.

Building Cryptocurrency Chart from Scratch in React - Part 1

Hardeep Singh — Mon, 24 May 2021 19:01:56 +0000

Let's start with the basic app is the react to display Cryptocurrency of the day.

In this blog, you will learn following

How to create a react app from scratch
How to use useState Hook
How to use useEffect Hook
Calling an API using Axios

Creating App in react

Create React App is a comfortable environment for learning React and is the best way to start building a new single-page application in React.

npx create-react-app crypto-tracker
cd crypto-tracker
npm start

(To execute the above commands Node.JS must be installed on your system you can use the following link to install Node.JS
https://nodejs.org/en/download/

crypto-tracker is app name.

You can open crypto-tracker in the Visual Studio Code so that you can start developing your react app.

You will see the following structure of your application

You will see app.js file

Installing Axios (Promise based HTTP client for the browser and node.js)

$ npm install axios

Using Axios

To use axios first we need to import axios

import axios from 'axios';

We will get CryptoCurrency for the day data from REST API.

*Let's create API folder in the src folder and add CryptoAPI.js *

Add following code in CryptoAPI.js

CryptoAPI.js

import React, { Component } from 'react';
import axios from 'axios';

export default class CryptoAPI extends React.Component {
  static getCoinOfTheDay() {
    return new Promise((resolve, reject) => {
      const url =
        'https://api.lunarcrush.com/v2?data=coinoftheday&key=XXXXXXXXXXXXXXXXX';
      axios
        .get(`${url}`)
        .then(res => {
          resolve(res.data.data);
        })
        .catch(err => reject(err));
    });
  }
}

Now we have successfully implemented code to call API using Axios.

It's time to create a component that will display the Currency Name and its symbol.

Add Presentation folder in the src folder and add CoinOfTheDay.js

CoinOfTheDay.js

import React from 'react';

function CoinOfTheDay(props) {
  return (
    <div>
      {props.data && (
        <div>
          <span> Coin of the Day</span> <br />
          <span> Name : {props.data.name} </span> <br />
          <span> Symbol : {props.data.symbol} </span>
        </div>
      )}
    </div>
  );
}

export default CoinOfTheDay;

We will pass data to CoinOfTheDay.js to display.

Adding CoinOfTheDay in the App.js and Passing data from API call

import { useState, useEffect } from 'react';
import './App.css';
import CryptoAPI from './Api/CryptoAPI'; 
import CoinOfTheDay from './Presentation/CoinOfTheDay';

function App() {

  const [coinOfTheDay, getCoinOfTheDay] = useState('');

  useEffect(() => {
    CryptoAPI.getCoinOfTheDay().then(res => {
      getCoinOfTheDay(res);
    });
  }, []);

  return (
    <div className='App'>
      <header className='App-header'>
        <h1>React Crypto Chart</h1>

        <CoinOfTheDay data={coinOfTheDay}></CoinOfTheDay>
      </header>
    </div>
  );
}

export default App;

Run your application using the following command.

npm start

You will see the Cryptocurrency coin of the day

We will continue to extend this application to display Graphical Charts related to Cryptocurrencies and related information.

Your suggestions are always welcome.

Basic Principles of Redux

Hardeep Singh — Sat, 01 Aug 2020 20:58:02 +0000

Redux is a state managing library used in JavaScript applications. It manages the state of your application or in simple words, it is used to manage the data of the application.

It is used with a library like React etc.

In this article we will cover three basic principles of Redux.

The first principle of Redux

You represent whole state of your application as a single JavaScript object

State example for a counter application

{
    CounterValue: 0
}

Your application may be a simple one like counter example, TodoList example or a complex application with a lot of UI, and change of state, you are going to represent the whole state of your application as a single JavaScript object.

The second principle of Redux

State tree is read only. You cannot modify or write to it.

How you change the state?

Anytime you want to change the state, you need to dispatch an action.

What is Action?

An action is a plain JavaScript object describing the change. Example increment counter value or decrement counter value.

{
       type: 'INCREMENT'
}

{
       type: 'DECREMENT'
}

Pure vs Impure Functions

To understand this principle we will have to differentiate between pure and impure functions.

Pure functions:

Pure functions do not have any network or database calls.

They just calculate the new value.
If you call the pure function with the same set of arguments or parameters, you’re going to get the same returned value.
Pure functions are predictable.
They do not modify the values passed to them, see following example

function cube(x) {
  return x*x*x;
}

Impure functions:

Any function that changes the internal state of one of its arguments or the value of some external variable is an impure function . They may have any side effects like network or database calls and it may modify the arguments which are passed to them.

function getSquare(items) {
  var len = items.length;
  for (var i = 0; i < len; i++) {
    items[i] = items[i] * items[i];
  }
  return items;
}

These functions may call the database or the network,
They may operate on the DOM,
They may override the values that you pass to them.

The third principle of Redux

To describe state mutations/changes, you have to write a function that takes the previous state of the app, the action being dispatched, and returns the next state of the app.

This function has to be pure.
This function is called the “Reducer.”

Complete Article link and more related to Redux and React