DEV Community: Rahul Yarragodula

Develop a Todo GraphQL Server in Golang 🔥

Rahul Yarragodula — Tue, 05 Jul 2022 07:45:44 +0000

Introduction

This is a simple Todo application developed in Golang using GraphQL. This tutorial helps you to find the right way for building your own GraphQL Server implementation in Go.

Click here to access full source code

Click here to access the Postman collections.

In this tutorial we will focus mainly on 3 things

It's beginner friendly.
Focused on industry best practices.
Deploy to the cloud.

The scope of this tutorial is to focus mostly on building graphQL servers rather than Go basics. If you're completely new to Golang, I would highly encourage you to have a strong knowledge on Go basics before going into this article.

What is GraphQL ?

GraphQL is created by Facebook, implemented in their mobile app in 2012 and open-sourced in 2015.

GraphQL is a query language and server-side runtime for APIs. GraphQL provides a flexible and intuitive syntax that enables clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time.

As an alternative to REST, GraphQL lets developers construct requests that pull data from multiple data sources in a single API call. Therefore reducing the network calls and bandwidth that saves the battery life and CPU cycles consumed by the backend applications (Official source).

Additionally, GraphQL gives API maintainers the flexibility to add or deprecate fields without impacting existing queries.

GraphQL is rapidly becoming the standard for API-based data access.

What is Schemas ?

API developers create GraphQL schema that describes all the possible data that clients can query through that service. GraphQL schema is made up of object types, which defines the kind of object you can request and the fields it has.

The most common operations on any GraphQL APIs are Queries and Mutations. Queries is used for reading data from APIs. Mutations are used for Create, Update and Delete operations.

Each operation in GraphQL schema is attached to a function called resolvers. A resolver is used to perform the actual execution of Query or Mutation.

Live Demo

Use this endpoint to perform live test

Develop a GraphQL Server in Go

Open your favorite code editor and create a go module using this go mod init github.com/rahul-yr/learn-go-graphql command.
Install the below modules.

Create a folder named todo in the root directory and 3 files named todo/models.go, todo/schema.go and todo/udf.go
Create a Todo model in the todo/models.go file. This model represents the todo item.

Implement CRUD operations.

Let's create the CRUD operations for the TODO model(todo/udf.go).

The above snippet has 5 functions defined 2 for Queries and 3 for Mutations. As well as a variable to store all the todo items(you could use a database instance here).
GetTodos() method is used for fetching all the todo items.
GetTodo(id int) method is used for fetching a todo item based on item id.
AddTodo(title string) method is used for creating a new todo item.
UpdateTodo(id int, title string, completed bool) method is used for updating the existing todo item based on item id.
DeleteTodo(id int) method is used for deleting the todo item based on item id.

Implement GraphQL schema

Now it's finally time to create the GraphQL schema (todo/schema.go).

GraphQL schema is implemented using this graphql.NewSchema(graphql.SchemaConfig{...}) method. This method actually resolves the GraphQL requests.
You could define Queries,Mutations and other object types using this graphql.NewObject(graphql.Objectconfig{...}) method.
This graphql.Fields{...} method is useful for defining fields.
Below method is used for declaring input arguments.

graphql.FieldConfigArgument{
                    "some_id": &graphql.ArgumentConfig{
                        Type: graphql.SomeDataType,
                    },
                }

Resolve block is where actual execution happens.

Implement an endpoint for GraphQL

Create a route handler(graph/router.go) file.
Here I have used the gin package. You could use any http package of your choice for creating endpoints.
The most important part here is to add this graphql.Do(...) method. This actually resolves the graphql request.

Run the server

Create a main.go file for running the graphql server.

Run the server using go run . command
You can find the live postman api collection here. Refer this for api specifications.
Below are the few snapshots of API requests and responses in action using Postman.

Create a Todo item

Update a Todo item

Read a Todo item based on item id

Read all Todo items

Delete a Todo item

Deploy to Cloud

Know how to deploy this repo to Heroku ? Click here to find out right way

Summary

Awesome 🔥, you have successfully completed this tutorial. I would 💝 to hear your feedback and comments on the great things you're gonna build with this. If you are struck somewhere feel free to comment. I am always available.
Please find the complete code at github

What is a Goroutine ? Find the right way to implement goroutine 🔥

Rahul Yarragodula — Tue, 21 Jun 2022 18:22:49 +0000

Why Go ?

Go has been widely used in most of the popular production systems such as Kubernetes, Docker, Influx DB, etc. There are mainly 4 reasons behind adoption of Go at such a massive scale.

It's simple and elegant
Provides built-in concurrency at scale
Designed to run on multiple cores
It's Super fast performance 🚀

Goroutine is a way to achieve concurrency in Go 🔥.

What is a goroutine ?

A goroutine is a lightweight thread managed by the Go runtime. Unlike Operating System thread which consumes memory usually in the range of MBs to function properly these goroutines consume memory only in the range of KBs. So it's easy and fast for go runtime to create goroutines than threads for concurrency. Goroutines are not actual threads, these are multiplexed to actual OS threads or even you could assume that these goroutines are a kind of abstract layer over OS threads.

Due to it's very small memory footprint, it's easy for go runtime to create thousands of goroutines in a fraction of milliseconds. But creating thousands of OS threads is heavily dependent on memory and the CPU, so it's obviously slow compared with goroutines.

As well as Goroutine does not have a Local Storage as a result goroutines are cheaper to implement than OS threads, so goroutines are much faster in terms of boot time.

Context switching is also faster in case of go than OS thread context switching, because OS threads are heavy resources.

On top of this Go even has another coolest feature i.e. Channels🔥. Channels are the built-in way to communicate with goroutines. In the case of OS threads, this communication is the most difficult thing you can think of.

So this how go achieved better concurrency than traditional programming languages, which made go a default language of choice for most of the use cases.

Syntax for goroutine

The most difficult part of goroutine is to understand it more than its real implementation. So take your time to understand it before diving deep into the actual implementation.

In other programming languages you might have used the async await pattern for concurrency(Node.js and python - async await). But here it's even simpler than that. Just add the go keyword to your function prefix( e.g : go someFunctionName), now go runtime executes the same function in concurrency mode. See how cool is this 😆.

    go addTwoNumbers(1, 2)

Implement a program without goroutine

Below is the snippet for adding 2 numbers. The addition function has a sleep command to mimic the processing time.

If you execute the program using the go run sequential.go command, you will get the output as below(result as summation of 2 numbers).

Implement a program with goroutine

Now let's convert this sequential execution to concurrency by adding go to the prefix of the caller. Below is the snippet.

If you execute now using this go run concurrency_without_wg.go command, you will immediately notice that the output of addition function is not displayed.

If you reached this far, then you have successfully executed your first program in concurrency mode 🔥.

But why is there a discrepancy in the output ?

This is happening because go runtime is not waiting for goroutines to finish their execution. So you need to explicitly update the details about goroutines to go runtime. This is where wait groups comes into picture. That's the exact problem wait groups solve.

What are Wait groups ?

WaitGroup(sync.WaitGroup) is a mechanism to wait till the collection of goroutines finishes their tasks.
There are mainly 3 helper functions available in golang to implement this feature.

Add()
Wait()
Done()

Add(5) method takes an integer as an argument. This integer represents the number of goroutines available in this collection to the go runtime. Wait() tells the go runtime to wait exactly at this position till the collection of goroutines finishes their execution. Done() method is used to inform go runtime that this particular goroutine finished its execution.

Below is the code snippet with 1 goroutine. Refer to the comments for deeper understanding.

If you execute now, you will get the desired output as below.

Summary

You have successfully implemented goroutines 🔥, but without channels (A way to communicate with goroutines) this topic is never gonna be completed.

To stay updated on Channels you can follow this blog.

I would 💝 to hear your feedback and comments on the great things you're gonna build with this. If you are struck somewhere feel free to comment. I am always available.

If you feel this article is helpful for others then please consider a like.

You can find the complete code at github

How to implement Concurrency and Parallelism in Go? 🔥

Rahul Yarragodula — Mon, 20 Jun 2022 17:26:20 +0000

Introduction

Before diving deep into the actual topic, it's really important to make yourself familiar with the below terminologies.

What is a Processor ?

A core or processor is a complex logic in the CPU which can execute a set of instructions known as a program. A Processor is a hardware entity that runs the actual Process.

What is a Process ?

In reality we won't be running our programs directly on the CPU core. This responsibility is handed over to the Operating system. Operating system writes your program instructions to the core or processor through something called Process.

A Process is a logical instance of your program which is managed by the operating system. There will be thousands of processes scheduled by the Operating system based on the priority of the program. Irrespective of the core or processor count an Operating system can have an arbitrary number of logical processes but only one process instruction gets executed per processor at any point of time.

What is a Thread ?

A thread is a path of execution within a process. A process can contain multiple threads. All programs have at least one thread that gets created when the program is started, but a program can start more threads to perform work in parallel.

What is Concurrency ?

Concurrency is a way to handle multiple tasks at once by efficiently utilizing the available resources. Even though it deals with multiple tasks simultaneously, it could only execute one non-blocking task(execution state) at any point of time. The remaining tasks either be in a blocked state, yet to start, completed, hold or any other states.

As you can see in the below snapshot it looks like we are executing multiple tasks simultaneously, but the truth is we are deprioritizing the tasks by wait time or blocked state. So that program could perform other important tasks during the same time and come back to the place where it left once it got the response. This is known as Concurrency.

Assume that you have created a program in any of your favorite programming languages that supports concurrency. As well as this program has 3 arbitrary tasks. Initially all the tasks are in default state(yet to start).

Assume that all the 3 tasks have some preprocessing and network calls involved in it, So it takes arbitrary time to get the response from the external systems.

Once you run the program, you will see that task 1 is in execution state since it has some preprocessing involved. We also know that it has network calls involved so it's waiting(blocked state) for the response from external systems. Mean time task 2 starts executing its preprocessing layer and enters into the waiting state again due to network calls. Now there are 2 tasks in the blocked state so your program starts executing task 3 and it's preprocessing layers. Now even task 3 enters into a blocked state. Once any of the previous blocked states got the response then its respective task got completed.

For some reason if 2 or more tasks in a blocked state get the response at the same time, then your program picks the task randomly and fulfills it one after another.

What is Parallelism ?

Parallelism is all about executing multiple jobs independently in parallel at the same given time. Unlike concurrency it doesn't care about the task status, So it executes all tasks at once in parallel. To perform these independent actions it consumes additional resources.

As you can see in the below snapshot all the 3 tasks started it's execution, waited and finished respective tasks at the same time. But overall speed wise it took less time compared to concurrency. In Terms of resource usage it still has a bandwidth to accommodate other tasks while all the tasks have been in idle state. With parallelism we were able to get things done faster, but weren't able to utilize the resources better.

If you have a system with multiple cores, then you could definitely take advantage of Parallelism.

What is Goroutine ?

A goroutine is a lightweight thread managed by the Go runtime. A thread could have thousands of goroutines due to its less compute intensiveness. The main difference between goroutine and thread is Goroutine does not have a Local Storage as a result goroutines are cheaper to implement than threads, so goroutines are much faster in terms of boot time.

If you're new to goroutines then click here for deeper understanding

Implement Parallelism in Go

Refer to the code snippet below.

It has a variable named threadProfile which will be used for tracking the number of threads being created at runtime. Here in Go, threads are the way to implement parallelism.

runtime.GOMAXPROCS(runtime.NumCPU()) is used to set the number of cores your application can use. If you don't set this variable by default it uses all the available cores. Usually it's defined in init method.

runtime.LockOSThread() will call this function to prevent goroutines from reusing the existing threads by locking and unlocking the thread. It's a trick to see parallelism in action, because Go scheduler by default reuses the threads in non-blocked state.

We have added log statements to see the count of threads before and after executions.

You can execute the above snippet using the go run parallelism.go command. You will get the similar output as below.

For the count := 10 we can see that approximately 10 new threads are being created. It clearly shows that this program is executed in parallel by locking the threads. We locked the threads to force this to happen for demo purposes.

Implement Concurrency in Go

Refer to the code snippet below.

It has almost similar variables and functions as defined above. Only major change is that we removed the lock methods, because we want to see the default behavior of goroutines.

You can execute the above snippet using the go run concurrency.go command. If you get the similar output as below then you have successfully executed the program in concurrency mode. From the output you can understand that even for count:=10 all the 10 goroutines are accommodated in the same number of available threads without even creating a new thread.

Now you have seen concurrency in action, but do you know Go automatically creates the required number of threads dynamically ?.

Let's see both concurrency and parallelism in action by updating count:=1000(1000 goroutines). You will get the similar output as below.

If you watch the output closely you will find a new thread being created based on the demand.

Summary

To get the best performance out of the box it's suggested to combine Concurrency and Parallelism in any language of your choice. In Go it's handled internally, but in other languages you need to explicitly define the details (node.js - clusters and async await , python - gunicorn and async await(FastAPI)).

If you love this article, then definitely you will also enjoy learning Advanced Singleton design pattern implementation in Go

If you feel this article is helpful for others then please consider a like.

Please find the complete code at github

Simple URL shortener app in Python for Beginners (🔥 FastAPI Demo)

Rahul Yarragodula — Wed, 15 Jun 2022 18:09:42 +0000

Introduction

This is a simple url shortener application developed in Python FastAPI.

Click here to access the Github repo.

Click here to access Postman API collection.

In this tutorial we will focus mainly on 3 things

It's beginner friendly.
Focused on industry best practices.
Deploy to cloud.

The scope of this tutorial is to focus mostly on building APIs rather than Python basics. If you're completely new to Python I would highly encourage you to have a strong knowledge on Python basics before going into this article.

Prerequisites

Download and install VS code from here
Download and install Python from here

What is a Virtual environment ?

A virtual environment is an isolated environment used to keep your project dependencies independently from any other projects or system configurations. This helps to avoid dependency conflicts with different versions.

Live demo

click here to test live endpoints

Develop url shortener APIs

Setup

Open the VS code and create a new file named main.py in the root folder.
This main.py file is responsible for running your application and acts as an entry point for your app.
Create a Python virtual environment using this command python -m venv virtual_env_name
Activate your virtual environment with respective operating system commands.

# Linux
source virtual_env_name/bin/activate

# Windows
virtual_env_name\Scripts\activate.bat

#Mac
source virtual_env_name/bin/activate

Install all the required dependencies in the Python virtual environment.

# add fast api package
pip install fastapi

# add web server for running fast api
pip install "uvicorn[standard]"

# add package for cleaning cache files
pip install pyclean

Add below snippet to the main.py file. This snippet has two endpoints of request method type GET. One endpoint returns {"hello" : "world"} json response and other returns the dynamic parameter you passed as item_id
Run the application using the below command. The default host url is http://localhost:8000

uvicorn main:app --reload

Open the default endpoint and if you see something like this, then you have successfully 🔥 deployed your application locally.

Similar to GET methods you can define any supported request methods you need.
Remove the two methods you have added i.e read_root, read_item and it's finally time to implement the actual url shortener endpoints.

Create url shortener endpoints.

Create the below files and directories in the root folder.

# folder : 
url_shortener

# files
url_shortener/__init__.py
url_shortener/database.py
url_shortener/router.py
url_shortener/models.py

__init__.py file is used for representing the current folder as a package. So that it can be referenced in other packages.
router.py file is responsible for handling url shortener routes.
models.py is a common file for defining all the necessary models for url shorteners.
database.py file is responsible for handling database operations. Since there are hundreds of database options available on the internet and for the purpose of simplicity, here we mimic database operations with sleep commands and store the data in memory variables.

Define models

Below is the snippet for models.py. As you can see in the code, It has 2 models.
CreateUrlShortener model is responsible for validating creation of short URLs.
CreateUrlShortenerResponse model is used as a json response model.

Define database operations

Below is the snippet for the database.py file. It has a member variable all_data which stores all the data in memory. Here you can define your respective database instance instead of the in memory variable. As well as it has 3 functions for creating a short url, deleting a short url and fetching all the short urls.
This snippet has well defined comments to help you understand the logic in detail.

Create endpoints

Here is the snippet for the router.py file.
In this we have defined an api router named url_shortener and database instance named mock_db_operations.
url_shortener is used for mounting these endpoints to the main router.
mock_db_operations is used for performing db operations.
It has 3 methods defined for creating, deleting, listing endpoints and 1 method for testing url redirects in action. Use the inline comments to understand the logic in detail.

Update main file

Below is the snippet for the main.py file which has the url router mounted i.e url_shortener.

Run the application locally using below command

uvicorn main:app --reload

Use this postman collection as API specs and test the endpoints.
Below are the few snapshots of API requests and responses in action using Postman.

Create url shortener snapshot

List all short urls

Test redirects in action

Delete short URLs

Deploy to cloud

Know how to deploy this repo to Heroku ? Click here to find out right way

Summary

Please find the complete code at github

How to deploy any backend to Heroku (easily🔥) ?

Rahul Yarragodula — Sun, 12 Jun 2022 15:19:11 +0000

Introduction

For the purpose of demonstration and to keep things simple we will use this Repository developed in Go. But you are free to choose any language of your choice.

Sample Repo for Python(Url Shortener App) and you can find the respective implementation tutorial here

This is a very simple Todo crud application which you can find on the internet. Feel free to use this repo. You can even take a step further and contribute to this open source repository with additional features.

You can find the API specs and postman collection of this repo here

To follow along with this tutorial you need to have a Heroku Account. I am gonna use GitHub as a Cloud repository. You can use any of your favorites(Bit bucket, Azure DevOps, Google cloud Repo, etc.).

Just a quick recap for those who don't know about Heroku

What is Heroku?

Heroku is a container-based cloud Platform as a Service (PaaS). Developers use Heroku to deploy, manage, and scale modern apps. Our platform is elegant, flexible, and easy to use, offering developers the simplest path to getting their apps to market.(Official read more)

Prerequisites

Download and Install VS code from here
Download and install git from here
Open your terminal and type these commands with respective details to configure git.

git config --global user.name "example name"
git config --global user.email "example@github.com"

Download and install Heroku CLI from here

Deploy

Open your terminal and clone this repo using the below command.

git clone https://github.com/rahul-yr/learn-go-simple-todo-crud.git

Open the cloned repo in VS code
It's really important to tell Heroku what steps to follow during application startup. This is where Procfile comes handy. You can create and mention all the steps in Procfile specific to your requirement (Click here to read more on Procfile).
For this scenario use this snippet in Procfile

web: some-app-name

Use heroku login command to add the heroku session to your user account. Once it's done you will get something like this.

It's finally time to create an app in Heroku using the below command.

heroku create some-app-name

Now deploy your app to Heroku using below command

git push heroku your-branch-name:master

If you get the same status as below then you have successfully 🔥 deployed to Heroku.

Use heroku open command to view the deployed version of your app.

Summary

Please find the complete code at github

Simple Todo app in Go for Beginners (Demo)

Rahul Yarragodula — Sun, 12 Jun 2022 10:05:59 +0000

Introduction

This is a simple Todo application developed in Go.

Click here to access Github Repo

Click here to access Postman collection

The scope of this article is just to illustrate the features/specs of this Repo. If you are looking for a tutorial on how to build, please skip this article. As well as this repo is developed for absolute beginners.

This repo is neither a Production nor a stable version. As well as don't expect any database connections or any third party integrations.

This repo has 5 endpoints.

POST https://learn-go-simple-todo-crud.herokuapp.com/todo/create

for creating todo's (E.g : {"title" : "Some task 1" , "completed" : false }

GET https://learn-go-simple-todo-crud.herokuapp.com/todo/list

for listing all the todo's

GET https://learn-go-simple-todo-crud.herokuapp.com/todo/read/{id}

for reading a Todo by id

DELETE https://learn-go-simple-todo-crud.herokuapp.com/todo/delete/{id}

for deleting a Todo by id

POST https://learn-go-simple-todo-crud.herokuapp.com/todo/update/{id}

for updating a Todo by id(E.g : {"title" : "Updated Task details 1", "completed": true}

Deploy to Cloud

Know how to deploy this repo to Heroku ? Click here to find out right way

Note

If you have any questions or looking for a tutorial then please use the comment section.

How to implement Singleton design pattern in Go ? 🔥

Rahul Yarragodula — Sat, 11 Jun 2022 13:31:24 +0000

Introduction

Before diving deep into the actual topic, it’s really important to make yourself familiar with the terminologies below.

What are Design patterns ?

In software engineering design patterns are solutions to general problems that occurred during the development of a software application faced by the majority of developers. The solutions were standardized over a period of trial and errors.

What is Race condition ?

A race condition is a scenario of a program where its behavior depends on relative timing or interleaving of multiple threads or processes. One or more possible outcomes may be undesirable, resulting in a bug.

What is the Singleton Design Pattern?

Singleton pattern restricts instantiation of a class or struct to only one single instance at any point of time. Usually its scope is defined as global to allow access of this instance across your application. This design pattern comes really handy in use cases such as logging, caching, Thread pool, DB connections,etc.

Singleton pattern could be implemented in one of 2 ways i.e Thread Safe and Non Thread Safe. By the way it's suggested to use thread safe.

What is Thread safe?

Thread safety is a mechanism to protect your application from entering into Race condition if it is having a shared state being manipulated by multiple threads at the same time.

What is Non Thread safe?

It does not check the safety of the threads which makes it faster to run but at the same time, it becomes more unstable for multithreaded applications. It works best for either single thread or sequential applications.

First let’s see the Non Thread Safety in action

Non Thread safe implementation in Go

As you can see in the code snippet below, a struct named SQLConnection and 3 functions named mockConnectionNonThreadSafe, performConcurrentAction, performSequentialAction are being implemented.

In the mockConnectionNonThreadSafe function, a sleep command is added to just mimic the real world scenario( creation of connection object always takes some arbitrary time).

To see non thread safe sequential execution in action, uncomment the performSequentialAction block in main function and run the snippet using this command.

go run singleton_pattern/non_thread_safe.go

If you get the same output as above, then you have successfully implemented the non thread safe sequential program. The output clearly shows that sequential execution works absolutely fine, in fact it’s just created a single instance which is kind of a singleton pattern, but performance is a trade off here because this is a step by step execution which means this program can’t take advantage of multiple cores and threads of a modern day cpu.

To test non thread safe concurrent execution, uncomment the performConcurrentAction block in main function and run the snippet.
The output will look something similar to this.

If you watch the output closely, you will find that the database instance is continuously modified by every concurrent execution due to some delay in creation of a connection instance ( which is expected in the real-world may be due to network or overload or something else). This is happening because the provided solution is not thread safe, that’s why the connection object is modified by other threads kind of a race condition. In this case we have achieved to successfully utilize the full cpu performance i.e cores and threads, but it’s still far away from the desired output.

Now it’s finally time to resolve this once for all.

Thread Safe implementation in Go

Again mostly similar code 1 struct and 3 functions(1 being mockConnectionThreadSafe) has been implemented.
As well as a new variable once of type sync.Once(Once is a Golang thread safe built-in struct that is used to implement a singleton pattern) has been added. This variable has a method Once which will handle thread safe execution.

Execute this snippet by uncommenting performConcurrentAction block in main function.

go run singleton_pattern/thread_safe.go

If you have done everything correctly till now, then you will see the database instance being created only once( unlike connection objects being modified by other concurrent executions in case of non thread safe) even though we are using concurrent executions.
The race condition has been handled and it’s working as expected by utilizing the full power of modern day CPU's. Congrats⭐ on top of that it’s absolutely thread safe.

Now you can access the same instance variable wherever you want without any conflicts.

Summary

Awesome 🔥, you have successfully completed this tutorial. I would 💝 to hear your feedback and comments on the great things you're gonna build with this.
If you are struck somewhere feel free to comment. I am always available.

Please find the complete code at github

How to implement state in React using Redux Toolkit (easy way🔥)

Rahul Yarragodula — Thu, 09 Jun 2022 03:34:37 +0000

Introduction

This tutorial will introduce you to Redux toolkit and teach you how to use it right way following best practices. By the time you finish this tutorial, you should be able to build your own Redux Applications.

What is Redux ?

Redux is a library for managing and updating application state using events called actions. It serves as a centralized store for state, that needs to be used across your entire application(instead of props drilling), with rules ensuring that the state can only be updated in a predictable fashion.

What is Redux Toolkit ?

Redux Toolkit is an all in one state management library for React.js. It helps you to create and manage global state easily with a lot less boiler plate code. Redux toolkit is basically an extension on Redux and other dependent packages, functions for state management. It simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

How State management works in Redux ?

Assume that you have created an action(action is a function that triggers the respective reducer) named incrementValue and reducer(reducer is a function or piece of code, that actually updates the global state known as store based on action event).

Let's say you have a component with button for incrementing the counter value based on onclick event. When you trigger the onclick event it will dispath an action named incrementValue. That action resolves against the respective reducer and updates the global state in store. The registered subscribers of the store will get notified with latest state details. Please find the reference image attached above.

Steps to implement `Redux Toolkit to your app`

Create a new react app and install all the required dependencies
Clean the boilerplate code
Create a counter app using useState (Optional)
Implement a store, slice and actions
Subscribe and Dispatch events
Final thoughts

Let's see this in action by building a simple counter application using redux toolkit.

1. Create a new react app and install all the required dependencies

Before creating a react app make sure you installed Node.js. Once you installed the dependencies use below snippet to create a new react app.

npx create-react-app counter-app
cd counter-app

Use the below command to install dependent packages.

npm install @reduxjs/toolkit react-redux react-bootstrap bootstrap

Add below snippet to public/index.html file. This is for bootstrap cdn.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Now run the app using npm start command. Open this url If you see something like this.

Then you have successfully created your react app.

2. Clean the boilerplate code

Remove everything from App.js and add below snippet.

import './App.css';

function App() {
  return (
    <div className="App container-md pt-5">
      <span> Will add details here... 🔥  </span>
    </div>
  );
}
export default App;

This is how it looks

3. Create a counter app using `useState` (Optional)

Create a state variable counter for storing the current value. As well as create functions to increment and decrement counter value.

import './App.css';
import React, {useState} from 'react';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  // create a state variable called counter and set it to 0
  const [counter , setCounter] = useState(0);

  // create a function called increment that adds 1 to the counter
  const incrementCounter = () => {
    setCounter(counter + 1);
  }

  // create a function called decrement that subtracts 1 from the counter
  const decrementCounter = () => {
    setCounter(counter - 1);
  }

  return (
    <div className="App container-md pt-5">
      <div className = "pb-3">
      <h2> Simple Counter Application... 🔥 </h2>
      </div>
      <div className = "row">
        <div className = "col-md-5">
          <Button variant="primary" onClick = {incrementCounter}>
            Increment
          </Button>
        </div>
        <div className = "col-md-2">
          <h4>
            {counter}
          </h4>
        </div>
        <div className = "col-md-5">
          <Button variant="primary" onClick = {decrementCounter}>
            Decrement
          </Button>
        </div>
      </div>
    </div>
  );
}

export default App;

Run the command npm start and you will see this below UI.

Great 🔥, you are ready to dive deep into the actual topic.

4. Implement a store, slice and actions

Create a store(src/redux/store.jsx) which is responsible for subscribing and maintaining the global state.

import { configureStore } from "@reduxjs/toolkit";
export const store = configureStore({
    reducer : {}
})

Wrap the main component with Provider in index.js as shown below. This will provide access to global state store across your application.

import { Provider } from "react-redux";
import { store } from "./redux/store";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

Create a slicer(src/redux/counterSlicer.jsx) where you define actions and reducers.

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

// Create the initial state of the counter
const initialState = {
    counter : 0
}

// Create the slice of the state
const counterSlice = createSlice({
    // The name of the slice
    name : 'counter',
    // The initial state of the slice
    initialState,
    // The reducers of the slice
    reducers : {
        // Increment the counter by 1 when the increment action is dispatched
        incrementAction : (state) => {
            // Increment the counter by 1
            state.counter = state.counter + 1;
        },
        // Decrement the counter by 1 when the decrement action is dispatched
        decrementAction : (state) => {
            // Decrement the counter by 1
            state.counter = state.counter - 1;
        }
    }
});

// Export the actions of the slice
export const {incrementAction , decrementAction } = counterSlice.actions;
// Export the reducer of the slicel
export default counterSlice.reducer;

Update the store.js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
    reducer : {
        counter : counterReducer
    }
})

5. Subscribe and Dispatch events

Subscribe to state counter(same name as defined in store.jsx) in App.js.

add import statement in App.js

import { useSelector } from "react-redux";

add subscriber to global state in App.js

  const counterStore = useSelector(state => state.counter);

listen to state changes in App.js

 <div className = "col-md-2">
       <h4>
          {counterStore.counter}
        </h4>
 </div>

If you run the application now, you will see exactly like below. But the increment and decrement won't work. Don't worry it will start working soon 😃

Now it's time to call actions.

add import statements

import { useSelector, useDispatch } from "react-redux";
import { decrementAction, incrementAction } from "./redux/CounterSlice";

create a dispath variable for calling actions

  const dispatch = useDispatch();

call the dispath event in increment and decrement onClick

 <Button variant="primary" onClick = {() => dispatch(incrementAction()) }>
        Increment
  </Button>
.....
<Button variant="primary" onClick = {() => dispatch(decrementAction())}>
        Decrement
 </Button>

Final App.js

import './App.css';
import React, {useState} from 'react';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import { useSelector, useDispatch } from "react-redux";
import { decrementAction, incrementAction } from "./redux/CounterSlice";

function App() {
  // create a state variable called counter and set it to 0
  const [counter , setCounter] = useState(0);
  const counterStore = useSelector(state => state.counter);
  // create a dispatch variable
  const dispatch = useDispatch();

  // create a function called increment that adds 1 to the counter
  const incrementCounter = () => {
    setCounter(counter + 1);
  }

  // create a function called decrement that subtracts 1 from the counter
  const decrementCounter = () => {
    setCounter(counter - 1);
  }

  return (
    <div className="App container-md pt-5">
      <div className = "pb-3">
      <h2> Simple Counter Application... 🔥 </h2>
      </div>
      <div className = "row">
        <div className = "col-md-5">
          <Button variant="primary" onClick = {() => dispatch(incrementAction()) }>
            Increment
          </Button>
        </div>
        <div className = "col-md-2">
          <h4>
            {counterStore.counter}
          </h4>
        </div>
        <div className = "col-md-5">
          <Button variant="primary" onClick = {() => dispatch(decrementAction())}>
            Decrement
          </Button>
        </div>
      </div>
    </div>
  );
}

export default App;

Now you should see increment and decrement in action 🔥.

6. Final thoughts

Awesome 🔥, you have successfully completed this tutorial. I would 💝 to hear your feedback and comments on the Great things your are building with React.

If you are struck somewhere feel free to comment. I am always available.

Please find the complete code at github