Recently I am learning the Redux toolkit. Redux Toolkit is an opinionated, batteries-included toolset for efficient Redux development. In this article, you will see why the Redux Toolkit deserves more attention in the React community.

Recently I have got knowledge about the redux toolkit. From now I will use the redux toolkit in my large project cause it is so good at state management than Context Provider.

I was too much curious to learn the redux state management system.

Let’s discuss the redux toolkit, as we know it contains our data and passes the data where it needs. Its only re-renders the component which uses the data. Where Context Api re-renders every component.



Fundamental thing

According to the official documentation, Redux is a predictable state container for JS apps.

Let’s break down the definition they provided. We get 2 main keywords here. They are ‘predictable’ and ‘state containers’.
We will start with the term predictable. It means that we‘ll have a complete idea of every single action and state of our application.

The other term ‘State Container’ refers to a container or store that will be provided by redux for storing our entire application state.


Action, Reducer, Store

Now let’s come to the point of how redux maintains the ‘predictable’ and ‘state container’ terms. Actually redux provides some events called ‘actions’ that can be used to update and manage our application state. But we have to follow certain patterns and rules of redux here which will help us to predict our application state.

How redux maintains the ‘predictable’ and ‘state container’ terms

we have an initial idea of what redux is, but what problem does it solve?

Let’s imagine you are building a large-scale React application. So there may be many components holding different states. If we want to pass this state from component to component we have to pass them as props again and again. And there is also the problem of ‘lifting state up’ arises. Redux solves this problem and gives us a centralized store to keep our state. We can easily access and modify our state by following some rules and patterns of redux.


Okay, 

First, we have to create a store with the help of the root reducer function that will be provided by redux. There will be some initial state configured with the store. Our UI will be rendered based on the initial state. Now if we want to change something in our UI based on user interaction we have to modify the store. For performing this action redux provides a function called dispatch. Change in store forces all the parts to re-render that are using the previous state.

Redux also provides some cool libraries and tools like react-redux, redux-toolkit, redux dev tools. They have made our life easier.

For exploring more you can check their official documentation.

Implementation in Application

A javascript library for making a real-time application known as Socket.io. It’s best for making our website real-time like we get our data without refreshing. It’s used by a lot of large companies.

First of all, let’s install our socket.io on the client side. For that run npm, I socket. io-client-side. It will install socket.io. Then we will import io from a socket. io-client, In a variable name socket, call the io function and then give your API link. It will connect to that server and give a used socket which will help us to make requests and send data through it.

Let’s discuss socket.io configuring in react app

On the server side install express and add all configuring express apps. Then install socket.io. After that solve cross-policy. Now we need to import Sever from socket.io and create io from that Sever with HTTP value. Then io. on(‘connection’) will provide a callback function which will give our socket. Now we can do socket.on method in the socket. On socket. on function the first value will be a string like a message then a call back function which will give data if anyone

Emit data on message. After that, we have sent data back to all connected users with our server.

Let’s discuss socket.io configuring in node js server

After that, we will add a socket.broadcast.emit(‘receive massage’). It will send our message data to all connected users but will have to add a socket. on(‘receive massage’) and pass callback function where we will add.

Send data to all users connected

Working on a team project was a great experience for me. Let's discuss how I contribute to Service A to Z.

The home banner can be changed from the dashboard so we have created a system on the dashboard to add images and text for the banner and add a slider on the banner. on every slide, we have animated our text on visible.

Creating dynamic home banner 

Creating an auto-replay system was a great experience for me as I am creating artificial intelligence. Though it is not fully artificial intelligence it can replay some common questions. Admin can teach this robot by giving some questions and answer

Realtime chat with auto replay by bot

In the middle of the home page, there will be a few sliders that will  show our trending and suggest you some service. 

Service page

On home page

Our services on home page

Find top providers available on our site, every single card will show the rating image of the provider and their location.

Top Providers

From here normal users can be a provider by sending a request to the admin. after admin approve user will be a provider and other user can hire him

Become a provider

The first graph chart will show last week's income and other quick information. the bottom provider will find his incomplete task.

Provider dashboard

Here admin will get to know about the status of our sites such as sales, earnings, total Providers, orders, etc and some   

Admin Dashboard

Visit Service A to Z to know better

It was my dream for me to build an e-commerce site. For making this dream become true I do a course online about making a full-stack website. And this project was an assignment. Let's discuss the features of this site.

This section is only for design and for users to know about what we really do. we sell drones and part of drones.

Short description what we do

Here users will find some drones that they can buy or see details of every single product. on the Details page, they will give some basic personal information to add order on his cart. 

Home product section 

On the dashboard user will find his order item and can able to pay all of this order on a single page then the order will automatically change status from pending to paid  

Pay method

Visit Drone house for more Info

A long time ago when I was a baby in web development and try to make a chat website where I and my friend will chat together. 

But after making the whole site I realized that my message can be delivered on MongoDB but how my friend will know I have sent him a message and he will reload his website to get the message? 

Disappointed 😔

For the first time, I heard about socket.io which let us deliver data in real-time without reloading my page!!

After my little research on google 

Then I immediately learn socket.io and start implementing sokcke.io in my project. Aha, what a satisfying feeling it is when I can send a message to my friend in realtime!

A journey of learning Sokect.io

It's not a huge site. so after you log in with google or email you will see all user 

Let's discuss about feature of my porject 

By clicking any user profile will join the room and can able to send messages also images.

Let's chat..

Users can change their profile photo by clicking the edit button on the right sidebar.

Profile update

Visit to my messenger (Chirkut) 

An experience-sharing site where user will share their experience after visiting a tourist place

without any authentication, users will find some blog suggestions here with pagination features 

Home page experience suggetion section

On the right sidebar, you will find a slider that is showing cheap and highest rating places and by clicking that slider you can see details. on the bottom section which is also a slider showing the latest admin blogs.


Right sidebar section

After login, you can post your experience, on add experience page.
here you must give some basic info about yours and a description. then you can able to post the blog. After admin approves your blog will be visible on the home page!!

Add Experiance of yours

visit Travel go

The last routine manager website you need!

Search routine with your institute name or shared id. also you can filter your search with department name, shift, and section. after clicking the checkout button you will go to the details page of that routine and can able to save or share that routine with other.

Details page

Search page

Find routine page

On the home page, your saved routine will show in the middle. you can save multiple routines and change routines from the dropdown. based on the selected routine you can see all classes on your selected day. 

Home page functionality 

Actually, every routine is a group where students and teachers can able to send messages.

Your routine is a hidden group

You can create your own routine and save it to show on the home page also your routine will be published and other users can find your routine and use it.

Create your own routine

On the overview page, the admin will see some important information such as how many routines are available on our site and the user. and last post-routine use activity. Admin can create a requested routine form the tables

Admin overview page

visit Routine manager

My dedication was to build a platform where developers will share their coding problems and another developer will help them.

To join a private group user need to answer some question that the group creator has defined

Find Group page

The creator of the group can able to make other user admin but the admin only can able to kick users. Creator will have all power that a normal admin will have. Also, the admin can delete user posts.

Every group Admin can manage user 

Visit Const group

It was the starting point of my web development career when I took the challenge to code continuously for 100 days!

I was a crazy gamer who played games all day long and loved working with robotics parts. I think by play games built my patience to sit all day long and by doing some coding for robotics I got my interest in programming.


How I Change my Interest from gaming to coding

I feel so confident and curious that I take the challenge to code for the next 100 days. Then day by day the GitHub contribution increased. 

And then who can stop me (except Allah)?

After 100 days some word was running through my mind "I did it... I did it".
Through this journey, I built my habit of coding and successfully completed the p.Hero course, and became the "Black Belt Developer"

Funny stories, serious experience,
technology topics,
you can find them all

A journey of learning

Project explanation

Funny stories, serious experience, technology topics, you can find them all

A journey of learning

Project explanation

Funny stories, serious experience,
technology topics,
you can find them all