A beginner-friendly blog exploring REST API concepts, offering a comprehensive understanding of APIs, particularly REST API, from scratch. Covers the topic from 0 to 1.

Understanding REST APIs: A Comprehensive Guide

<h1>Introduction to State Management</h1>
State management is a fundamental concept in software development, especially concerning user interfaces. It involves the management and storage of data within an application, representing the current condition of the application. This includes user input, visibility of user interface elements, and data fetched from external sources.
In dynamic user interfaces, state management is crucial because interfaces are not static; they change based on user interactions, data loading, authentication status, and other dynamic factors.
State management contributes to dynamic UI in modern web apps in various ways:
<ol>
<li>
Dynamic Content Rendering:
<ul>
<li>Use Case: Displaying a list of items.</li>
<li>Role of State: The state tracks the list of items. When the list updates, the state triggers UI re-rendering, ensuring the user sees the latest data.</li>
</ul>
</li>
<li>
User Interactions:
<ul>
<li>Use Case: Handling form inputs, button clicks, and other user interactions.</li>
<li>Role of State: State variables store form input values and interactive element statuses. When a user interacts with these elements, the state updates, triggering UI updates and component re-renders.</li>
</ul>
</li>
<li>
Conditional Rendering:
<ul>
<li>Use Case: Displaying different UI components based on user roles or permissions.</li>
<li>Role of State: State variables determine user roles or permissions. Components conditionally render UI elements based on state values, ensuring the correct components display for each user.</li>
</ul>
</li>
<li>
Error Handling:
<ul>
<li>Use Case: Displaying error messages for failed data fetching or form submissions.</li>
<li>Role of State: Error messages are stored in the state. When an error occurs, the state updates with the error message, causing the UI to display the appropriate error to the user.</li>
</ul>
</li>
<li>
Real-time Data and WebSockets:
<ul>
<li>Use Case: Displaying real-time data updates (e.g., live chat messages, notifications).</li>
<li>Role of State: State manages real-time data from APIs or WebSocket connections. When new data arrives, the state updates, and React components re-render to reflect the latest information in the UI.</li>
</ul>
</li>
<li>
Authentication and Authorization:
<ul>
<li>Use Case: Managing user login status, user roles, and access permissions.</li>
<li>Role of State: State variables store user authentication status and roles. Components check the state to determine if a user is logged in, redirect users based on authentication status, and show or hide UI elements based on user roles.</li>
</ul>
</li>
<li>
Complex UI States:
<ul>
<li>Use Case: Managing multi-step forms, wizards, or other complex UI states.</li>
</ul>
</li>
</ol>
<blockquote>
Role of State: State can store step numbers, form data, or any other complex UI state. By updating the state, components can navigate between steps, validate form inputs, and manage the overall flow of the user interface.
</blockquote>
<blockquote>
Now let us dive into the crucial concept of state management widely used. The reducer functions and array.reduce() method.
</blockquote>
<h1>1. Array.reduce():</h1>
Used to reduce the arr to a single value by executing a provided function(reducer) for each value of the arr from left to right and return value is stored in an accumulator.
<pre><code>array.reduce(function(accumulator, current val, current index, arr), initialValue);
</code></pre>
Current index and arr obj are optional parameter, initialValue is also a optional parameter.
If you don't provide an initial value, the reduce function uses the first element of the array as the initial accumulator value and starts reducing from the second element onward.
<pre><code>array.reduce(reducer fn, initialValue)// reducerfn(accumulator,current Value).
</code></pre>
Reducer fn is callback fn.a "callback," is a function that is passed as an argument to another function and is executed after the completion of that function.
<pre><code>let arr = [10, 20, 30, 40, 50, 60];
// Callback function for reduce method
function sumofArray(sum, num) {
 return sum + num;
}
//Fucntion to execute reduce method
function myGeeks(item) {
 // Display output
 console.log(arr.reduce(sumofArray));
}
Here's how you can use array.reduce() to manage the state of the total price of items in the cart:

const cartItems = [
 { id: 1, name: 'Item 1', price: 20 },
 { id: 2, name: 'Item 2', price: 30 },
 { id: 3, name: 'Item 3', price: 15 }
];

const totalPrice = cartItems.reduce((accumulator, currentItem) => {
 return accumulator + currentItem.price;
}, 0);

console.log('Total Price:', totalPrice);
</code></pre>
<blockquote>
This is how we can implement our own reduce function in javascript
</blockquote>
<pre><code>function myReduceFromIndex(array, callback, initialValue, startIndex) {
 let accumulator = initialValue !== undefined ? initialValue : array[startIndex];
 const start = initialValue !== undefined ? startIndex : startIndex + 1;

 for (let i = start; i &#x3C; array.length; i++) {
 accumulator = callback(accumulator, array[i], i, array);
 }

 return accumulator;
}

// Example usage:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Using myReduceFromIndex to sum elements from the 4th index till the end of the array
const startIndex = 3; // Index from where to start summing (4th index)
const sum = myReduceFromIndex(numbers, (accumulator, currentValue) => accumulator + currentValue, 0, startIndex);
console.log('Sum from 4th index till end:', sum); // Output: 55 (4 + 5 + 6 + 7 + 8 + 9 + 10)

</code></pre>
The function loops through the array, starting from the appropriate index (either 0 or 1, based on whether an initial value is provided), and applies the callback function to each element. The result of the callback function becomes the new accumulator value for the next iteration. Finally, the function returns the accumulated result
<h1>2. Reducer in useReduce:</h1>
1. Reduction Operation:
Both the reducer function in <code>useReducer</code> and the callback function in <code>array.reduce()</code> perform reduction operations. They take an accumulator and the current element (or action in the case of <code>useReducer</code>) as arguments and return a new accumulator value.
2. Accumulator and Current Value:
The reducer function in <code>useReducer</code> and the callback function in <code>array.reduce()</code> both take an accumulator and a <code>currentValue</code> as parameters. The accumulator accumulates the values and changes its state as the reduction progresses.
While both concepts involve the idea of reducing data, the reducer function used with <code>useReducer</code> is specific to React and handles state management within components. It has no direct relationship with the <code>array.reduce()</code> method in JavaScript.
Differences:
1. Purpose and Context:
<ul>
<li><code>useReducer</code> in React is specifically designed for managing state in functional components. It is used to manage complex state logic where the next state depends on the previous state and some action.</li>
<li><code>array.reduce()</code> is a general-purpose method in JavaScript for reducing an array of values into a single value. It is used for various tasks such as summing numbers, finding maximum/minimum values, transforming data, and more.</li>
</ul>
2. Action and State in useReducer:
<ul>
<li>In <code>useReducer</code>, the reducer function takes two parameters: <code>state</code> and <code>action</code>. The <code>action</code> parameter is an object describing the action to be performed, while the <code>state</code> parameter represents the current state.</li>
<li>In <code>array.reduce()</code>, the callback function takes four parameters: <code>accumulator</code>, <code>currentValue</code>, <code>currentIndex</code>, and <code>array</code>. The <code>accumulator</code> accumulates the return values of the callback function, and there is no concept of an action or state.</li>
</ul>
3. Return Value:
<ul>
<li>The reducer function in <code>useReducer</code> returns the new state based on the provided action. It must return a new state object or the current state if no changes are necessary.</li>
<li>The callback function in <code>array.reduce()</code> returns the accumulated value after the reduction is complete. The return value can be of any type, depending on the specific use case.</li>
</ul>
<pre><code>// reducer function
const cartReducer = (state, action) => {
 switch (action.type) {
 case 'ADD_TO_CART':
 return {
 ...state,
 cartItems: [...state.cartItems, action.payload],
 };
 case 'REMOVE_FROM_CART':
 return {
 ...state,
 cartItems: state.cartItems.filter(item => item.id !== action.payload.id),
 };
 default:
 return state;
 }
};

</code></pre>
In this example, the reducer handles two actions: 'ADD_TO_CART' and 'REMOVE_FROM_CART'. It adds items to the cart by appending them to the cartItems array and removes items by filtering them out based on their id.
Next, let's use the useReducer hook in a React component to manage the cart state:
<pre><code>import React, { useReducer } from 'react';

const initialCartState = {
 cartItems: [],
};

const ShoppingCart = () => {
 const [cartState, dispatch] = useReducer(cartReducer, initialCartState);

 const addToCart = (item) => {
 dispatch({ type: 'ADD_TO_CART', payload: item });
 };

 const removeFromCart = (item) => {
 dispatch({ type: 'REMOVE_FROM_CART', payload: item });
 };

 return (
 &#x3C;div>
 &#x3C;h2>Shopping Cart&#x3C;/h2>
 &#x3C;ul>
 {cartState.cartItems.map(item => (
 &#x3C;li key={item.id}>
 {item.name}
 &#x3C;button onClick={() => removeFromCart(item)}>Remove&#x3C;/button>
 &#x3C;/li>
 ))}
 &#x3C;/ul>
 &#x3C;button onClick={() => addToCart({ id: 1, name: 'Product 1' })}>Add Product 1&#x3C;/button>
 &#x3C;button onClick={() => addToCart({ id: 2, name: 'Product 2' })}>Add Product 2&#x3C;/button>
 &#x3C;/div>
 );
};

export default ShoppingCart;

</code></pre>
In this example, the useReducer hook manages the cart state. The addToCart function dispatches an action to add items to the cart, and the removeFromCart function dispatches an action to remove items from the cart.
This is a basic implementation and can be expanded further to handle more complex cart operations in a real e-commerce application.
<h2>useReducer in Short and Easy Terms:</h2>
<code>useReducer</code> is a React hook that helps manage state in a more complex manner. It's like <code>useState</code>, but for more advanced state management scenarios. It takes in a reducer function and an initial state, and it returns the current state and a dispatch function that you can use to update the state based on certain actions.
<pre><code>//codes
import React, { useReducer } from "react";

// Reducer function
const reducer = (state, action) => {
 switch (action.type) {
 case "INCREMENT":
 return { count: state.count + 1 };
 case "DECREMENT":
 return { count: state.count - 1 };
 default:
 return state;
 }
};

const Counter = () => {
 // useReducer returns current state and a dispatch function
 const [state, dispatch] = useReducer(reducer, { count: 0 });

 return (
 &#x3C;div>
 Count: {state.count}
 &#x3C;button onClick={() => dispatch({ type: "INCREMENT" })}>Increment&#x3C;/button>
 &#x3C;button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement&#x3C;/button>
 &#x3C;/div>
 );
};

export default Counter;
</code></pre>
Explanation of Concepts:
Reducer Function:
A reducer is a pure function that takes the current state and an action as arguments and returns a new state. It specifies how the state should change in response to the action.
In the example, the reducer takes <code>state</code> and <code>action</code> as arguments and returns a new state object based on the action type.
State:
<code>useState</code> manages a single value as state. <code>useReducer</code> can manage more complex state structures.
In the example, the state is an object: <code>{ count: 0 }</code>.
Dispatch and Action:
<code>dispatch</code> is a function returned by <code>useReducer</code>. You call it with an action object to update the state.
An action is an object that describes what kind of operation you want to perform. It must have a <code>type</code> property that indicates the type of action.
In the example, when you click "Increment," it dispatches an action <code>{ type: 'INCREMENT' }</code>, and the reducer increases the count. Similarly, for "Decrement," it dispatches <code>{ type: 'DECREMENT' }</code>, and the reducer decreases the count.
Redux Reducer:
Redux is a state management library for JavaScript applications, commonly used with React. In Redux, a reducer is a pure function that specifies how the application's state changes in response to actions sent to the store. Redux's concepts are somewhat similar to useReducer, but there are key differences.
<h1>3. Redux Reducer: Basic Example</h1>
In Redux, you create a reducer that specifies how the state should change based on dispatched actions. Here's a basic example of a Redux reducer managing a counter:
<pre><code>// Reducer function
const counterReducer = (state = 0, action) => {
 switch (action.type) {
 case 'INCREMENT':
 return state + 1;
 case 'DECREMENT':
 return state - 1;
 default:
 return state;
 }
};
</code></pre>
In this example, the <code>counterReducer</code> takes the current state and an action, and it returns the new state based on the action type.
Differences Between Redux Reducer and useReducer:
<ol>
<li>
Single Store:
Redux operates with a single centralized store for the entire application. Reducers handle specific slices of this global state.
</li>
<li>
Immutable State:
In Redux, state updates must be immutable. Reducers always return new state objects, never modify the existing state directly. This is a fundamental principle of Redux.
</li>
<li>
Action Dispatch:
Actions in Redux are dispatched explicitly using the <code>dispatch</code> function provided by Redux. Actions are plain JavaScript objects with a <code>type</code> property that describes the type of action.
</li>
<li>
Middleware and Side Effects:
Redux allows you to apply middleware (like Redux Thunk) for handling asynchronous actions and side effects, providing a more complex and robust state management solution.
</li>
<li>
Predictable State Changes:
Redux ensures predictable state changes by following strict principles and patterns, leading to a more manageable and debuggable application state.
</li>
</ol>
<h1>Conclusion</h1>
Redux emphasizes predictability. Given the same initial state and a sequence of actions, a Redux reducer will always produce the same state.
In contrast, useReducer is a React hook used for local component state management. It operates at a component level and doesn't enforce immutability rules or handle global state like Redux does. While both concepts use the term "reducer," they serve different scopes and purposes within a JavaScript application. Redux's reducer is specifically tailored for managing global application state and follows strict principles for predictable state management. useReducer, on the other hand, is used for managing component-level state within React components.
<blockquote>
If you have any suggestions for improvement please reach out to me at <a href="https://twitter.com/danishzahid111">Twitter</a>
</blockquote>

This blog delves into JavaScript state management, elucidating array.reduce and its functionality. It distinguishes between useReduce and redux reducers, providing clear insights in a concise manner.

State Management in Java Script: Concept of Reduce and Reducers

The Library Management API, built with Spring Boot and MySQL, offers comprehensive functionality for managing library resources. Leveraging Spring Data JPA and Hibernate, it supports CRUD operations, filtering, and transaction management to ensure data integrity. The API incorporates robust validation and exception handling, providing a reliable and user-friendly system. Extensive unit testing using JUnit validates the API's behavior and ensures its reliability in handling library operations.

Library Management APIs

The application showcases my proficiency in full-stack development and utilization of contemporary technologies. The frontend is built with ReactJS, while the backend leverages Express and MongoDB Cloud for database storage. The deployment involves using Vercel for the frontend and Render for the backend.

Full-stack To-do App

An E-commerce application resembling Flipkart or Amazon, incorporating features like wishlisting, adding/removing from wishlist, cart management, checkout, product search, and filtering by price, rating, and category using React.js. The backend was implemented using a pre-existing solution from Mockbee, utilizing Mirage.js and an in-memory database.

dz.

Danish Zahid

Springboot 🧑‍💻 | ReactJs ⚛️ | Java 🍵

Projects

These are some of the projects I have worked on

Library Management APIs

Full-stack To-do App

The Khadi Shop Ecommerce App

Blogs

These are some of the blogs I have written on

Understanding REST APIs: A Comprehensive Guide

State Management in Java Script: Concept of Reduce and Reducers

Technologies I have worked with

These are the technologies I have worked with in the past