Forem: Arpit Parekh

Full stack developer: A process and not an end goal.

Arpit Parekh — Sun, 15 Oct 2023 13:04:30 +0000

Hello everyone, in this blog, I'll be sharing my experience on how I have started my journey as a full-stack developer. I will be sharing my mistakes my experiences and how I have taken the steps to become up better full-stack developer. Remember you can never be a complete and/or a perfect full-stack developer you will always be in the process of becoming a better one. So did it ever cross your mind that who is exactly a full stack developer?

A full-stack developer is like a coach of a football team who is the mastermind of the game. Well in our case a full-stack developer is the mastermind of building the application. A football team can be as good as their coach. Who can be a better coach? When they know their players, what formation to play, and adapt well to the situation. A coach can never be perfect, they are always in the process of becoming a better one.
So who can be a better Full-stack developer? Who knows what technologies to use, how to use them, where to use them, and what technologies to use in a particular situation/application?

Now coaches are not born experts, they need to invest in understanding the game, the formations, the players, etc. They need to get their basics right about the game. So a full-stack developer needs the basics of everything and they need every technology in their armoury to become a better one.
So how do start that journey to become a better coach ….Errr…a full-stack developer? Here is what I have understood:

1.First up Get your forwards right: Learning Front-End Technologies.

The first step to becoming a full-stack developer is to learn front-end technologies. There are loads of front-end technologies/ frameworks you can get started with and sometimes it's overwhelming. Don’t worry it's not like you have to finish that in one night. It is not an engineering exam that you have to give it tomorrow. Learning usually takes time and it has its own process. And oh boy, while learning front-end technologies, sure you have to follow a process. There are many front-end technologies you can get started with like Angular, React, Vue, etc. These are the popular ones, and you can find out more on the internet.
But to learn these frameworks, you must get the basics right. And what I mean is that while you get your forwards right or you start learning these frameworks, the coach should know what the role of forwards is. In our case, a full-stack developer should know HTML, CSS, and JavaScript to learn any of these frameworks. These languages help create the structure, design, and interactivity of a website. What I did is, I learned these basics in college and started working on projects. It was not like I started working for a company of anything, I took a use case and built that. You can do that too, just start building from something scratch and make your own path. When I got the internship, I started working on Angular, and having already got the basics clear It helped me a lot in the Internship. As of now, I would say I don’t know all the front-end technologies and whichever I know, I find that there's a lot more I can grasp.

2.Setting up your Midfield: Learning What are Back-end Technologies and How to use them for supporting your frontend.

Once you get a knack for front-end frameworks, it's time to strengthen your midfield with an understanding of back-end technologies. Back-end technologies are like the midfielders of your team. They support and handle the requests coming from the front end, ensuring a seamless game (or application, in this case). Popular back-end technologies include Node.js, Python (with frameworks like Django or Flask), Ruby (Ruby on Rails), and more. Some of these technologies are fast and powerful, and keep everything running smoothly. It enables you to write server-side code using JavaScript, the same language you've used for the front end. Also Understanding back-end technologies is crucial because they manage your databases, business logic, and server operations. Imagine your team without a sturdy midfield—chaos, right?
Just like a midfielder needs to know the strategy of the game, you need to comprehend concepts like server, database, API, HTTP methods, and more. Get comfortable with the terms before diving into the real action. Start with a back-end language like Node.js, which is like a versatile potion that can adapt to various challenges. Learn how to handle requests, manage databases, and create robust back-end applications. This is the approach I followed when I started learning the backend technologies. APIs (Application Programming Interfaces) are like passes between players. Learn how to create APIs, connect them to your front end, and pass data back and forth seamlessly. Mastering this skill ensures your midfield passes are accurate and efficient. Just as a team follows a game strategy, you'll adopt frameworks like Express (for Node.js), Django (for Python), or Ruby on Rails. These frameworks streamline your efforts and help you play a smarter game.
Much like a midfielder perfects passing and tackling in practice, build back-end projects. Start with simple ones and gradually move to more complex challenges. Projects will reinforce your learning and level up your skills. Remember, just like a football game, becoming a full-stack developer is about teamwork—your front-end and back-end should complement each other to score those development goals!

3.You Defence: Learning Database Management

In a football game, defenders are crucial. They form a solid line of defense, ensuring the opponents struggle to score goals and make sure to give them a headache. In the tech world, this role is parallel to cybersecurity.
Cybersecurity is like the art of defense in football. It involves understanding different attack strategies, just as defenders need to know various offensive tactics. Concepts like authentication (verifying identities), authorization (permissions to access), encryption (keeping data secure), and secure coding practices are the basic skills every tech defender needs. Imagine you're guarding a goalpost. Cyber-attacks are the opponents trying to score against you. Your role as a cybersecurity expert is to anticipate their moves and ensure they don't breach the application's defense. It's all about keeping the playing field secure and ensuring a fair game! Since I am working in a bank, the most important thing for us is the data and we have to protect that and thus having the right knowledge becomes crucial for us. So a full stack developer needs to have this basic knowledge of protecting their application and from being vulnerable. Since the start of my career, I have learned a lot about authorization, role-based authentication, storing passwords in a vault, and whatnot. I am not yet the master of this but I am making sure to learn day by day.

4. Guarding the Net: The Role of DevOps

In a football match, the goalkeeper is the ultimate defense. They are the last line of protection, making critical saves to ensure the opponent doesn't get past them. Similarly, in the tech world, DevOps is like the goalkeeper, safeguarding the entire development process.
DevOps ensures a smooth flow of the game, from training (coding) to match day (deployment). Just like a goalkeeper must communicate effectively with the team and have quick reflexes, DevOps ensures efficient teamwork and quick adaptation during the development process.
Continuous integration (blending code changes into a shared repository), continuous deployment (automatically deploying code changes to production), and automation (reducing manual efforts) are some of the tactics in DevOps' playbook. They are the goalie's moves, quick and decisive, guarding the net and enabling a seamless game (or application) progression. Learn about continuous integration (blending code changes), continuous deployment (automatically deploying changes), and automation (reducing manual efforts). These are your goalie's moves, quick and efficient, ensuring a flawless game (or application) progression.

Now we have talked about our forwards, our midfielders our defense, but where does a full-stack developer come into the picture ??

Remember I told you that a full-stack developer is like a coach. They need to have knowledge about their team, well in our case the technologies. When you have the right kind of knowledge about the technologies you can strategies better. You can plan out which technologies are needed in what applications and how can you build a well-equipped and fully functional application.
Now as a full-stack developer, you don’t need to know every framework, you should just focus on the basics and if your basics are clear you can adapt to every framework at any point.

Things you should do when you start your journey to become a full-stack developer. (These are some points I followed, does not mean you should do the same. )

• Focus on getting your basics clear.
• As all teachers say, focus more on practical rather than theory.
• Just like school days, chart your learning.
• Learn from seniors. Having seniors with great knowledge is a
blessing and fortunately in my journey so far I have learned a
lot from them rather than learning from a book.
• Just as you learn from seniors, having great and skilled peers
can also be helpful. Don’t be jealous, be selfish and learn from
them.
• Ask questions. Make your seniors and your peer’s life hell by
asking them questions.
• Work in a team because working in a team culture helps you a
lot.
• Develop strong problem-solving skills. This is like mastering
the art of improvisation during a football match. You'll face
unexpected challenges, and the ability to solve them efficiently
is a valuable skill.
• Engage with the developer community. Attend meetups,
conferences, and webinars. Networking helps you learn from
others and opens doors to new opportunities.
• Start with small applications and gradually tackle more complex
challenges. The more you practice, the better you become.

Mistakes That I hope someone would have told me! But no one did, but you guys are glad that I am telling you.

• Starting out, it's easy to get excited and try to learn
everything at once. This approach is like trying to score a goal
from the halfway line—it rarely works. Focus on one thing at a
time, master it, and then move on to the next. Rome wasn't built
in a day, and neither is a full-stack developer's skill set!
• Documentation is like the playbook in football. It might not be
the most thrilling read, but it's essential for understanding
how things work. I wish I had paid more attention to it in the
early stages.
• Much like delaying practice in football, delaying coding
practice can hinder progress. Make a routine and stick to it.
Consistent effort, even if it's just a little every day, can go
a long way.
• Just like in football, where you need to constantly refine your
strategies, in coding, rigorous testing is crucial. The more
thorough your testing, the fewer bugs you'll have to deal with
later on. Testing your code is essential, I did that very late
and I had to face repercussions of that. So test your code
thoroughly.
• Focus on writing clean and working code and not just working
code.
• Just like scoring a goal in football brings joy, creating
something amazing in coding should also be a joyful experience.
Don't forget to enjoy the process!
• Remember, making mistakes is okay. Learn from them, grow, and
keep progressing in your journey as a full-stack developer.

All in all, becoming a full-stack developer is not an end goal , it’s a journey and a process.
So in this blog, I have just shared a small part of the journey that I have embarked on to become a full-stack developer. These were my learnings and experiences that I have shared with you, doesn’t mean you have to agree and follow this. But if you read this Thanks for that, Cheers 😊

References

Cover

Inspiration

GitLab YAML: Every Full Stack developers Helper to deliver a smooth Project

Arpit Parekh — Sun, 15 Oct 2023 12:52:07 +0000

What is GitLab YAML?

Imagine you have a big box where you keep all your toys and games. This box is like a special helper for you to keep everything organized and neat. Just imagine how your mom would be happy to see this stuff organized right?

Now, Git is a tool that helps grown-ups (like computer programmers) keep their computer code organized. Instead of toys, they have lots and lots of computer code, which is like a set of instructions telling the computer what to do.

In Git, there's a special file called "git.yml," but it's actually ".gitlab-ci.yml" (the ".yml" part is like the box's special label). This file is like a set of rules written down on how to do things with the computer code. It's like a recipe book for cooking but for the computer.
In this "recipe book," you write down steps like how to build a cool tower using building blocks. In computer language, it might say things like "first, get all the building blocks, then stack them up to make a tower ."
This special ".gitlab-ci.yml" recipe book helps the computer follow the steps automatically. So, when a programmer adds some new instructions (like adding a block to the tower), Git and this ".gitlab-ci.yml" recipe book make sure everything is done correctly.

Just like you can have different recipes for making different meals, programmers use different ".gitlab-ci.yml" recipes for different parts of their big projects. It's like having a recipe for making a cake and another one for making cookies.
So, Git and ".gitlab-ci.yml" help people work together smoothly, like a team of toy builders following a plan to create amazing things!

Enough with Analogies! The next part is for nerdy geeks!

GitLab CI/CD is a tool that automates the process of integrating code changes, testing them, and then delivering the updates to production.
At the heart of GitLab CI/CD is the gitlab.yml file, a configuration file written in YAML (YAML Ain't Markup Language). This file is where the magic happens, specifying how your project should be built, tested, and deployed.
In this file, you specify the list of things you want to do, like test and deploy your application. This file follows the YAML format and has its own special syntax.
You can name this file anything you want, but .gitlab-ci.yml is the most common name. Use the pipeline editor to edit the .gitlab-ci.yml file and test the syntax before you commit changes.

Runners

Runners are the agents that run your jobs. These agents can run on physical machines or virtual instances. In your .gitlab-ci.yml file, you can specify a container image you want to use when running the job. The runner loads the image and runs the job either locally or in the container.

Pipelines

Pipelines are made up of jobs and stages:
• Jobs define what you want to do. For example, test code changes, or deploy to a staging environment.
• Jobs are grouped into stages. Each stage contains at least one job. Typical stages might be build, test, and deploy.

Variables

GitLab CI allows you to set your own variables in .gitlab-ci.yml. These variables are available in the job environment when it executes. These variables are stored in the Git repository and are meant to store non-sensitive project configuration. These variables can be used later in all executed commands and scripts. Credentials and other secrets should be stored as Secret Variables instead.

GitLab YAML as Your Recipe

Imagine you're making a classic Indian dish like "Paneer Tikka." The recipe lists ingredients, their quantities, and the steps to prepare the dish. GitLab YAML does something similar for your project.

Just like a recipe guides you in creating a perfect Paneer Tikka, GitLab YAML guides your project through each step, ensuring a delicious outcome—successful project completion!

CI/CD Pipelines

Let's delve into a real-life example: setting up a Continuous Integration/Continuous Deployment (CI/CD) pipeline for a web application using GitLab YAML.

Example GitLab YAML for a CI/CD Pipeline

stages:
  - build
  - test
  - deploy

build:
  stage: build
  script:
    - npm install
    - npm run build

test:
  stage: test
  script:
    - npm run test

deploy:
  stage: deploy
  script:
    - deploy_to_production.sh

Here's how this GitLab YAML translates into our cooking analogy:

1. Build Stage: Preparing Ingredients

The 'build' stage in GitLab YAML can be similar to gathering all the essential ingredients and prepping them for your recipe.
You start by assembling all the spices, vegetables, and other necessary elements. This is exactly what we do before starting a project, installing the dependencies and tools your project needs—the 'npm install' step. Just like making sure you have all the spices in place for a spicy curry, 'npm install' ensures you have all the necessary packages for your application.

Next, we move on to the actual cooking. When you turn on the stove and start mixing and sautéing the ingredients, it's like running 'npm run build.' This step compiles your code, aligning with mixing ingredients and preparing the base of your curry. The 'build' process creates a solid base, just like a well-prepared curry base sets the tone for a delicious meal.

2. Test Stage: Quality Assurance

The 'test' stage in GitLab YAML mirrors the critical step of tasting your dish as it's being prepared.
So when your curry or gravy is done for a Paneer tikka what you do? You ensure it has the right sweetness and texture, and if you like spicy things you ensure it has the right amount of spiced flavor to it.
Similarly, 'npm run test' checks your code to ensure it's as per the desired quality. Running tests is a very important step as it ensures your application works as expected. What I have learned from my experience so far, never ever miss testing of your application, no matter how much time it takes.
Testing is like double-checking if the flavors of your dish have blended well, making sure everything is in harmony before moving forward.

3. Deploy Stage: Serving the Dish

The 'deploy' stage in GitLab YAML is like the final plating and presentation of your culinary creation.

Picture you've just finished cooking an exquisite Paneer tikka. Plating the various components, arranging them aesthetically, and adding garnishes is akin to 'deploying' in the coding world. 'deploy_to_production.sh' script represents this final presentation—the dish is ready to be served, just as your application is ready to be used.
Deploying is the moment when you step back and admire your beautifully plated meal, ready to be enjoyed, just as your application is now ready to be experienced by users.

Advantages:

Standardization: GitLab YAML provides a standardized and clear way to define project configurations, ensuring consistency across the team.

Automation: It automates various processes like building, testing, and deploying, saving time and reducing manual errors.

Easy Version Control: As YAML files are text-based, they can be easily version-controlled using Git, enabling collaborative development.

Disadvantages:
Learning Curve: Understanding YAML syntax and mastering its intricacies can be challenging for newcomers, potentially slowing down initial development.

Complex Configurations: For complex projects, the YAML file can become lengthy and complex, making it hard to manage and troubleshoot.

Mistakes to Avoid When Using GitLab YAML

Improper Indentation: YAML relies heavily on indentation. A small indentation mistake can break the entire configuration.

Overly Complex Pipelines: Keep your CI/CD pipeline simple and focused. Overly complex pipelines can be difficult to manage and understand.

Not Testing Changes: Before pushing changes to your repository, test the YAML configuration locally to catch any syntax errors or issues.

Conclusion: Sailing Smooth with GitLab YAML

Just like a chef carefully plans their recipes for a smooth cooking journey, gitlab.yml helps us plan and automate the steps for our code's journey from the cutting board to the dining table.

Think of gitlab.yml as your recipe card. It lists down the ingredients (your code), the steps to cook (test, build, deploy), and how to present the final dish (deployment). And hey, just like adding a pinch of spice, we can throw in some fun elements, making our coding experience smooth and happy!

In this blog, we've explored GitLab YAML with few examples, showcasing how it's your go-to tool for effective project management. This blog explains the basics of gitlab.yml , but It has a lot more depth to it. As I move forward I will explore more and will publish more content on this, till then thanks for Reading! Cheers😊

References:
https://about.gitlab.com/blog/2015/12/14/getting-started-with-gitlab-and-gitlab-ci/
https://docs.gitlab.com/ee/ci/
https://dx.appirio.com/ci-cd-gitlab/gitlab-yml/
https://codefresh.io/learn/gitlab-ci/what-is-the-gitlab-ci-yml-file-and-how-to-work-with-it/

React Redux - How to Implement Redux in your React Application.

Arpit Parekh — Sat, 03 Jun 2023 10:12:07 +0000

In this tutorial, we will see the how to Setup a React Application using Redux. We will setup the application in such a way that it manages the state globally, thus letting components use that state at any given point because that is the purpose of using Redux.
We will go step-by-step about how to create a store, how to create actions, and how to dispatch those actions to the reducer. Then we will see how the reducer updates the store and finally read the store from the components. As I am doing this, I will provide the code along.

If you aren’t familiar with the concepts of Redux, I would recommend you first go through Thisblog, to get an understanding of the basic concepts of Redux and the Flow of Redux. Before you see the implementation, it would be helpful for you to understand how things are connected in Redux.

Note: Redux has a lot of starter code that is difficult to set up for the first time. Also one of the most confusing things (and maybe annoying at some times) about Redux is that you can set up your files in many different ways. I have tried setting it up in a very basic way so it would be easy for you to understand.
We are going to develop a very basic App, called “Post Board”

Let’s Start………

Pre-requisites: You should have a React Project created

Step 1:
In your React app run, install the following dependencies,

npm install redux react-redux redux-devtools-extension redux-thunk @reduxjs/toolkit

Step 2:

Create 2 folders redux and components in src Then create store.js, action.js,reducer.js in redux folder. Create PostContainer.jsx and PostForm.jsx in the component folder. The component structure will look like this:

Step 3:
In actions.js, create a functions that returns an action object when invoked. The two functions will be addPost and deletePost(). Don’t forget to export it!

export const ADD_POST = 'ADD_POST';
export const DELETE_POST = 'DELETE_POST';

export const addPost = (post) => ({
  type: ADD_POST,
  payload: post,
});

export const deletePost = (postId) => ({
  type: DELETE_POST,
  payload: postId,
});

Step 4:
In reducer.js , create a function to handle the actions and to update the state.

import { combineReducers } from 'react-redux';
import { ADD_POST, DELETE_POST } from './actions';

const initialState = {
  posts: [],
};

const postsReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_POST:
      return {
        ...state,
        posts: [...state.posts, action.payload],
      };
    case DELETE_POST:
      return {
        ...state,
        posts: state.posts.filter((post) => post.id !== action.payload),
      };
    default:
      return state;
  }
};

export const rootReducer = combineReducers({
    posts: postsReducer
});

Step 5 :

In store.js ,using composeWithDevTools() we will add the support for Redux DevTools extension that can help you a lot in visualizing all the complex events that are happening in a redux application under the hood. Also, we will add the reducer in this.

import { configureStore ,applyMiddleware} from "@reduxjs/toolkit";
import postsReducer from './reducer'
import { composeWithDevTools } from "redux-devtools-extension";
import  thunkMiddleware  from "redux-thunk";
const composedEnhancer =composeWithDevTools(applyMiddleware(thunkMiddleware))
const store = createStore({
        reducer: rootReducer,
        composedEnhancer
    }
);

export default store;

Step 6:

In PostForm.jsx we will add the form that will allow us to “Add New Post, Delete Post ”. Notice here we use, useDispatch() to dispatch the action to the reducer.

import React , { useState } from "react";
import { useDispatch } from "react-redux";
import { addPost } from "../redux/action";
import { v4 as uuidv4 } from 'uuid'
const PostForm = () => {
    const dispatch = useDispatch()

    //Adding Some CSS to give a good look
    const myStyle={
        backgroundColor: "white",
        minHeight: "2rem",
        display: "flex",

        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        color: "black"
    }

    const [title, setTitle] = useState('')
    const [content, setContent] = useState('')

    const onTitleChanged = e => setTitle(e.target.value)
    const onContentChanged = e => setContent(e.target.value)

    const onSavePostClicked = () => {

        const newPost={
            id: uuidv4(), // Generate a unique ID 
              title: title,
              content: content
        }
          dispatch(addPost(newPost))

        setTitle('')
        setContent('')
    }


    return (
        <section>
            <h2>Add a New Post</h2>
            <form style={myStyle}>
                <label htmlFor="postTitle">Post Title:</label>
                <input type="text" 
                id="postTitle" 
                name="postTitle" 
                value={title} 
                onChange={onTitleChanged}
                />

                <label htmlFor="postContent">Content:</label>
                <textarea id="postContent" 
                name="postContent" value={content}
                onChange={onContentChanged}
                />
                <button style={{margin:'10px'}}
                type="button" 
                onClick={onSavePostClicked}>
                    Save Post
                </button>
            </form>
        </section>
    )
}
export default PostForm

Step 7 :

In PostContainer.jsx, we will write the logic for Displaying the post and deleting it.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {  deletePost } from '../redux/action';

const PostContainer = () => {
  const {posts} = useSelector((state) => state.posts)
  const dispatch = useDispatch();


  const handleDeletePost = (postId) => {
    dispatch(deletePost(postId));
  };

  return (
    <div>
    <h2>Posts</h2>
       <div className="box">
        {posts.map((post) => (
          <div key={post.id}>
            <div>{post.title}</div>
            <div>{post.content}</div>
            <button onClick={() => handleDeletePost(post.id)}>Delete</button>
          </div>
        ))}
      </div> 


    </div>
  );
};

export default PostContainer;

Step 8:
InApp.js , Wrap Both the components PostForm.jsx and PostContainer.jsx in App Component.

import './App.css';
import PostForm from './components/PostForm';
import PostContainer from './components/PostContainer';

function App() {
  return (
    <div className="App">
      <PostForm />
      <PostContainer />
    </div>
  );
}

export default App;

Step 9:

Finally , In index.js, add import { Provider } from 'react-redux' and then wrap your <App> component in <Provider>. <Provider> makes Redux store available to any component nested within it.

That’s it. We are Done !! **
Now lets see the actual and Final Product and how does it works.
**PS: Don’t Focus on styling of UI , focus on functionality! 👀

You Can Also Track the Changes of the state, which action is called, and much more via the Redux Dev Tools. Let’s see how that works. Remember download the Redux DEV Tools extension from Chrome before using it.

That’s it for this blog. Thanks for Reading the Blog. Happy Coding ! 😊

Redux- A JavaScript Library in Modern Web Development

Arpit Parekh — Mon, 22 May 2023 13:08:36 +0000

Let’s Consider we have a small application, with some components. Few of those components declare and use their own state. Now let’s suppose in some cases, a component might want to share its data with its immediate children(component). This can be done by declaring the state locally within the component itself and passing down that state as props to the children (also called prop drilling).
But what if your application grows in size and there comes a situation where you want to pass the data several steps down the component hierarchy? In this case, we will declare a state in the parent’s component and pass it down to the child component via prop drilling. This will become a costly operation.

Consider the following diagram:

In the above diagram, consider we need to share the same type of data between the Child 4 component and Child 5 component, to do so we will declare a state in the Child 1 component and then pass that state in the Child 4 component and Child 5 component as props. But what if we need to pass the same state to Child 4, Child 9, and Child 10? As done before we need to declare a state in the App component and do several multi-levels of prop drilling to pass the State from the App component to Child 4, Child 9, and Child 10.
But this will create a problem as the application grows in size App.js will have unnecessary state declarations, or any other parent component will have unnecessary state declarations that they won't be using at all. Also, another disadvantage of this is the re-rendering of components which makes the application slow, and unresponsive. Rendering is caused by any change in the state or prop. In the above example, any component which has a state declared in it and acts as a passage from parent to child will get re-rendered unnecessarily when its state or prop changes.
The solution to this problem is state management that is we have to manage our state in such a way that it doesn't make our application slower and the components aren't re-rendered unnecessarily. And this is where Redux comes into the picture. Redux has the facility for state management and is efficient to use it. Here we can create a global state and put it in a store. If any component needs that state they can fetch it from there. Now Let us see discuss more Redux,

What is Redux?

Redux is nothing but a state management library for JavaScript apps. It is mostly used with React simultaneously, but can be used with other frameworks like Angular, Vue, etc. It helps manage the state of the application in a centralized manner, meaning the entire state of the application is stored in one JavaScript object known as “store”. Redux is also predictable in nature, meaning we will know how the state will change at a given time and what “action” is performed on it.

There are 3 main pillars or 3 main components of Redux:

Store:
The global state of an application is stored in an object tree within a single store – Redux docs
It acts a container where the global state of the application is stored and maintained. It is the center stage of any application which uses Redux. There can only be one single store in the Redux application. In Redux, if you want to modify the state you must dispatch an action to the store. The store has 3 critical methods:

getState()- It returns the current state of the store.
dispatch(action) - dispatches an action. It is the only way to modify the application state.
subscribe ()-which registers listeners, allowing code to trigger every time a change takes place.

Action:
The only way to change the state is to emit an action, an object describing what happened - Redux docs
Actions are nothing but pure objects used to store user events. For example, Adding an item to a cart. They contain payloads of data that are the only way you can send data from your application to your Redux store. The data can be from user interactions like mouse clicks, API calls, or even form submissions.
• Actions must have a property ‘type’ to indicate the type of action to be carried out.
• It also contains the ‘payload’ property which contains the information or data used to change the state.
• If you want to execute any action, you will have to dispatch that action via the ‘dispatch’ method, which then sends the data to the store.

Reducer:
Reducers are pure functions that handle actions and update the state. They take the current state and an action as input and return a new state object without modifying the original state. Reducers are responsible for defining how the state should change in response to different actions. If it is a simple application you can create only one Reducer but as the application grows in size you may need to create multiple reducers and combine them with the help of the combineReducer() function.

Let us now Understand what is the flow of Redux in a pictorial way,

Pic Reference: https://dev.to/ashikacronj/react-redux-a-complete-guide-to-beginners-2a45

The flow of Redux can be summarized in the following steps:

The application dispatches an action: The application can dispatch an action in response to a user interaction, a network request, or any other event.
The Redux store receives the action: When an action is dispatched, the store receives the action and then it passes to the reducer.
The reducer updates the store: The reducer updates the store with the new state, which represents the updated state of the application. So now the reducer contains the current state of the application.
The store notifies the UI: After the store has been updated, it notifies the UI that a change has occurred. This allows the UI to re-render with the new state. The UI can read the current state of the application from the store at any time. This allows the UI to always display the most up-to-date information.

Let’s Understand Redux flow with a small Example,
Let’s say you are planning to take a vacation somewhere, so the first thing you will do is book a train.
Following will be the process,

Now Let’s see this example in terms of the Redux Analogy,

Pros and Cons of Redux:

Pros:

- Centralized State Management: Redux has a “single source of truth” for the entire application state called the store, thus it becomes easy for other components to access that state.
- Predictable state management: As Redux follows a strict unidirectional flow it becomes easy to understand why the data changes and how it changes. As Redux is predictable, it becomes easier for developers to track everything that is going on in the app such as actions and state changes.
- Performance Optimizations: Whenever a component’s state is updated React renders all the child components in that component tree. If the child component is not using that data the re-renders are wasted. As Redux manages the state centrally these re-renders won’t happen thus improving the performance.
- Time Travel Debugging: Redux maintains a history of actions that have been applied to the application state, allowing developers to easily undo or redo actions and debug the application in the past and present.

Cons:

- Encapsulation: As Redux doesn’t allow encapsulating data, any component can read the component from the store allowing security issues to be raised and if the application grows larger there will be more security concerns.
- Increased Complexity and Learning Curve: As Redux follows a certain structure it becomes difficult for developers who are beginners to setup the architecture of Redux as it needs a lot of boilerplate code to get started even for application which is smaller or medium-level. Thus, it has a steep learning curve which takes time for developers to master it. Redux also adds an extra layer of complexity to an application which can be overwhelming who are new to it.
- Excessive Memory usage: As the state is immutable thus when the state is being updated, the reducer has to return a new state every time. This leads to excessive memory usage in the long run of the application. Therefore, when the store gets bigger the memory usage gets higher.

Conclusion:

Redux is a powerful JavaScript library for managing the state of an application. It provides a centralized store for storing the application state, which makes it easier to manage and maintain that state. Redux follows a predictable and strict set of rules for updating the state, which helps in debugging and testing. We can track how the state changes and which action has triggered the change. It works well with large applications but it has its fair share of disadvantages such as, as the application gets larger it consumes more memory. It also adds complexity to an application, has a steep learning curve, requires a lot of boilerplate code, and may have a performance impact. While Redux has its benefits that does not mean that you should always use Redux in your app. It is necessary to consider its pros and cons.

In this blog, I have discussed the core concepts of Redux, but to see the implementation of it, follow This blog.

Thanks for Reading! 😊

Reference 1

Reference 2