Learn Redux Toolkit in under 1 hour

Summary

In this informative video, the presenter Hitesh introduces viewers to the Redux toolkit, a state management library that simplifies data handling in React applications. Hitesh explains the fundamentals of Redux, emphasizing its non-React centric design and how it can be integrated with React for state management. He demonstrates the creation of a Redux store and reducers, and how to use the Redux Dev tools for inspection. The tutorial includes building a to-do application to showcase the power of Redux for managing state efficiently, walking through each step from adding and deleting to-dos, to querying the state with useSelector. Hitesh's approach is practical and straightforward, aiming to clarify common misconceptions and make Redux more accessible for developers.

Takeaways

• 🚀 Introduction to Redux Toolkit: A beginner-friendly guide to understanding and using Redux for state management in React applications.
• 📦 Redux is a state management library that is not exclusively tied to React, but can be used alongside React and other libraries through plugins.
• 🔧 The problem of prop drilling: Redux helps to eliminate the issue of having to pass props through multiple layers of components by offering a centralized state management system.
• 🏢 Core concepts of Redux: Store (centralized state container), Reducers (pure functions that specify how the state can be updated), and Actions (objects that describe what should happen to the state).
• 🔄 Redux data flow: Data should flow in one direction from the store to the UI, with updates made through reducers in response to actions.
• 🛠️ Use of hooks in React for Redux: 'useSelector' to read data from the store and 'useDispatch' to dispatch actions to update the store.
• 📂 Project structure: Organizing Redux logic into features or slices, with each slice containing its own reducer and initial state.
• 🔍 Debugging with Redux DevTools: Using the Redux DevTools extension to inspect the state, actions, and changes in the store during development.
• 📝 Best practices: Avoiding direct state mutation and using descriptive action and reducer names for better readability and maintainability.
• 🔄 Handling undo/redo patterns: Redux makes it easier to implement complex patterns like undo/redo by keeping track of all state changes.
• 🎓 Importance of learning Redux: Despite its initial complexity, mastering Redux can greatly simplify state management and improve the scalability and maintainability of large applications.

Q & A

What is Redux and why is it used in state management?

Redux is a state management library that is not specifically centered towards React or Next.js, but can be combined with them using plugins. It is used to manage the state of an application in a more structured and predictable manner, making it easier to handle complex state logic and maintain consistency across different parts of the application.

What does the Redux Toolkit provide that makes working with Redux simpler?

The Redux Toolkit provides a set of utilities and conventions that simplify the creation of a Redux store, the management of reducers, and the interaction with the store through actions and selectors. It reduces boilerplate code and helps in following best practices, making the overall process of using Redux more straightforward and less error-prone.

How does Redux help in solving the issue of prop drilling in React applications?

Redux helps in solving prop drilling by providing a centralized store where components can directly access and update the state, eliminating the need to pass props down through multiple levels of the component hierarchy. This allows for a more efficient and clean way of managing state across the application.

What are the main components of a Redux state management system?

The main components of a Redux state management system include the store, reducers, actions, and selectors. The store holds the application state, reducers define how the state can be updated, actions are used to describe changes to the state, and selectors are functions that help in selecting and extracting data from the store.

How does the Redux Toolkit's 'createSlice' method simplify the process of creating reducers?

The 'createSlice' method in the Redux Toolkit simplifies the process of creating reducers by allowing developers to define the initial state, reducers, and actions in a single object. It automatically generates action creators and action types, making it easier to manage and maintain the state logic within the application.

What is the role of 'useDispatch' and 'useSelector' hooks in a React application using Redux?

The 'useDispatch' hook is used to dispatch actions to the Redux store, allowing components to trigger state changes. The 'useSelector' hook is used to access and select data from the Redux store, enabling components to display the current state or parts of it. These hooks facilitate the connection between React components and the Redux state management system.

How does the Redux state management system ensure a unidirectional data flow?

Redux ensures a unidirectional data flow by mandating that state can only be updated through reducers in response to actions. This means that all changes to the state must go through a clear and predictable path: actions describe what happens, reducers define how the state changes, and the store holds the current state.

What is the significance of using unique IDs for each to-do item in the Redux store?

Using unique IDs for each to-do item in the Redux store allows for easier management and manipulation of individual items. It enables specific items to be targeted for actions such as updates or deletions without affecting other items in the list, leading to a more efficient and organized state management process.

What is the role of the 'Provider' component in a Redux-enabled React application?

The 'Provider' component from React-Redux is used to make the Redux store available to all components in the application. It wraps the root component of the application, ensuring that any component can access and interact with the Redux store through the use of hooks like 'useDispatch' and 'useSelector'.

How does the Redux Toolkit handle state immutability?

The Redux Toolkit automatically handles state immutability, ensuring that the state is not directly mutated. Instead, it requires the use of specific methods and patterns, such as the 'createSlice' method and the 'immer' library, which allows for the creation of draft state copies that can be modified without directly altering the original state.

Outlines

00:00

📺 Introduction to Redux Toolkit

The video begins with the host, Hitesh, returning from vacation and introducing the topic of Redux Toolkit. He explains that the video will serve as a no-nonsense crash course on Redux Toolkit, aiming to help viewers understand its simplicity and practical application in state management. Hitesh briefly recalls previous discussions about building an application similar to Dribbble and emphasizes the importance of state management in larger projects. He introduces the concept of Redux as a state management library that is not limited to React or Next.js, but can be used with React plugins for state management within React applications. Hitesh then demonstrates the creation of a new project using 'create-react-app' and discusses the benefits of Redux Toolkit, including its straightforward approach to state management and the lack of jargon.

05:01

📊 Understanding Redux and State Management

In this paragraph, Hitesh delves deeper into the concepts of Redux and state management. He explains the problem of prop drilling in React components and how a global state, or a centralized store, can simplify data management. Hitesh introduces key terms such as 'store', 'reducers', 'useSelector', and 'useDispatch', providing a basic understanding of their roles in Redux. He emphasizes the importance of a single data flow in React and how Redux enforces this through its rules for updating and reading data from the store. Hitesh also discusses the idea of 'slices' and how they help in organizing reducers and maintaining the initial state of the store. The paragraph concludes with a brief overview of the steps involved in setting up Redux Toolkit for a project.

10:02

🛠️ Installing Redux Toolkit and Initial Setup

Here, Hitesh guides viewers through the installation process of Redux Toolkit and its integration with a React application. He starts by instructing how to install Redux and React-Redux libraries using npm, highlighting the importance of the Redux Toolkit for easier configuration. Hitesh then demonstrates how to set up the store by creating a 'store.js' file and using the 'configureStore' method from the Redux Toolkit. He also briefly touches on the creation of reducers and the importance of following good practices for structuring the project. The paragraph concludes with Hitesh discussing the need to wire up the reducers with the store and the process of creating a 'slice' for managing to-do items within the application.

15:03

🔍 Creating and Exporting the To-Do Slice

In this segment, Hitesh focuses on creating a 'slice' for managing to-do items within the Redux store. He explains the concept of a 'slice' and how it helps in organizing the initial state and reducers for a specific feature. Hitesh demonstrates the process of creating a 'ToDoSlice.js' file using the 'createSlice' method from the Redux Toolkit. He details the structure of the slice, including the initial state, the 'addToDo' and 'removeToDo' reducers, and the use of 'nanoid' for generating unique IDs for each to-do item. Hitesh also discusses the importance of exporting the slice's actions and reducer so that they can be used in the rest of the application. The paragraph concludes with Hitesh showing how to wire up the 'ToDoSlice' with the store and the importance of this step for the functionality of the application.

20:04

🔧 Implementing Add and Remove Functionality

This paragraph covers the implementation of adding and removing to-do items within the Redux store. Hitesh explains the process of using 'useDispatch' and 'useSelector' hooks to interact with the store. He demonstrates how to create an 'addToDo' component that collects user input and dispatches an action to add a new to-do item to the store. Hitesh also shows how to create a 'ToDoList' component that uses 'useSelector' to access and display the list of to-do items from the store. He discusses the importance of structuring components to avoid prop drilling and how Redux simplifies state management. The paragraph concludes with Hitesh explaining how to implement the functionality to remove a to-do item by dispatching an action with the item's unique ID.

25:05

🎨 Styling and Displaying To-Do List

In this part, Hitesh focuses on styling and displaying the to-do list within the application. He discusses the use of CSS classes and Tailwind CSS for styling the to-do list and individual items. Hitesh demonstrates how to loop through the to-do items using the 'map' function and display each item with its unique ID and content. He also covers the implementation of delete functionality within the to-do list, allowing users to remove items directly from the list. Hitesh emphasizes the simplicity of managing state with Redux and how it streamlines the process of updating and displaying data in the application. The paragraph concludes with Hitesh showing the final result of the to-do list with add and remove functionalities, highlighting the ease of state management and the clean structure of the Redux-powered application.

30:07

📝 Wrapping Up the Redux Toolkit Tutorial

In the concluding paragraph, Hitesh summarizes the key points covered in the Redux Toolkit tutorial. He reiterates the simplicity of setting up and using Redux for state management in React applications. Hitesh emphasizes the importance of creating a store, defining slices for features, and using 'useSelector' and 'useDispatch' for interacting with the store. He also highlights the ease of adding, updating, and removing data from the store, and how this simplifies the development process. Hitesh encourages viewers to explore the Redux documentation for further learning and to apply the concepts learned in building larger, more complex applications. The tutorial ends with Hitesh inviting feedback and encouraging viewers to engage with the content.

Keywords

💡Redux

Redux is a state management library used in conjunction with React applications. It helps manage application state in a predictable way by maintaining a single, immutable state tree. In the video, Redux is introduced as a solution to prop drilling and complex state management issues, emphasizing its role in making state changes predictable and manageable.

💡Redux Toolkit

Redux Toolkit is an official, opinionated, batteries-included toolset for efficient Redux development. It provides a simplified API, and various utilities like the createSlice function to make building a Redux store easier. The video highlights Redux Toolkit as a means to simplify the Redux configuration process, making it more accessible for beginners.

💡State Management

State management refers to the process of handling the state (data) in an application, particularly in a way that it can be easily maintained and updated. In the context of the video, state management is a key challenge addressed by using Redux, allowing for a centralized and consistent way to handle data across a React application.

💡Create React App

Create React App is an officially supported tool by Facebook for creating single-page React applications. It simplifies the process of setting up a new React project and provides pre-configured build processes. In the video, the speaker uses Create React App to quickly bootstrap a new project for demonstrating Redux integration.

💡Provider

In the context of Redux, a Provider is a component that makes the Redux store available to all child components in the component tree. It is used to wrap the root component of the application, ensuring that any component can access the store and use Redux for state management. The video emphasizes the importance of the Provider for making the Redux store globally accessible.

💡Dispatch

Dispatch is an action in Redux that sends an action object to the store, which in turn invokes the reducer functions to update the state of the application. It is a fundamental concept in Redux, as it defines how state changes are triggered and managed. In the video, the speaker explains how to use dispatch to send actions to the store, facilitating state updates.

💡Reducer

A reducer is a pure function in Redux that takes the previous state and an action as input, and returns the next state. Reducers are responsible for describing how the state changes in response to actions, ensuring that the state changes are predictable and consistent. The video discusses reducers as the core mechanism for updating the state within the Redux store.

💡UseSelector

UseSelector is a hook provided by the React-Redux library that allows components to access the Redux store's state. It is used to read data from the store without having to dispatch actions. In the video, useSelector is introduced as a means for components to retrieve state data and stay up-to-date with any changes.

💡Slice

In the context of Redux, a slice refers to a portion of the Redux store that represents a specific part of the state and the corresponding reducers that manage it. Slices help in organizing the state and actions in a structured way, making the code more maintainable. The video introduces the concept of slices as a way to define the initial state and reducers for a specific feature or part of the application.

💡Action

In Redux, an action is an object that represents an intention to change the state. It contains information about what should happen, and may include data (payload) necessary for the change. Actions are the only way to trigger state changes in Redux, and they are handled by reducers to produce new state updates. The video emphasizes the importance of actions as the primary mechanism for state changes in a Redux application.

Highlights

Redux is a state management library that is not specifically designed for React, but can be combined with React for state management in React applications.

The Redux Toolkit is a crash course guide focusing on the practical code aspects of Redux, avoiding analogies and jargons.

Before the vacation, the discussion was around building an application idea called Spark, inspired by Dribbble, focusing on functionality rather than cloning Dribbble.

State management is a key aspect of the project, and using a state management library in larger projects can significantly simplify development.

The goal is to teach state management and demonstrate how it can be implemented in a project, even though it might seem complex initially.

A new project is created with the Redux Toolkit, emphasizing the straightforward approach without jargon, focusing on the essentials.

The Redux Toolkit simplifies state management, making it easier for developers to understand and implement in their applications.

The concept of global state is introduced as a solution to prop drilling, where information can be accessed directly without passing through multiple components.

The Redux architecture includes key concepts such as the store, reducers, useSelector, and useDispatch, which are explained in a straightforward manner.

The store is a centralized place that holds all the state information, and it can be accessed directly using the useSelector hook.

Reducers are functions that update, add, remove, or delete information in the store, and they should be the only way to manipulate state in a Redux application.

The useSelector hook allows components to selectively ask for specific information from the store without directly interacting with it.

The useDispatch hook is used to call a specific reducer to update information in the store, maintaining the single data flow rule in React.

The tutorial walks through the process of setting up Redux with the Redux Toolkit and React, including the installation of necessary packages and the creation of a store.

The creation of a 'slice' is introduced, which is a piece of the state responsible for tracking the initial state and reducers for a specific feature.

The tutorial demonstrates how to create the initial state and reducers for a to-do list application, using the Redux Toolkit's createSlice method.

The process of adding and removing to-do items is explained, showcasing the simplicity of using Redux for state management in a React application.

The video concludes with a summary of the key concepts learned and encourages viewers to explore the Redux Toolkit further for their projects.

Transcripts

hey there everyone hitesh here back

again with another video and yes I'm

back from the vacation and welcome to

this amazing video in this video we are

going to discuss about the Redux toolkit

this is a no-nonsense crash course guide

on the Redux toolkit which will help you

to directly jump into Redux toolkit

avoiding all those analogies all those

jargons and just focusing on the code

part so that you can understand how

simple it is now Redux is Redux is a

state management Library which is not

really Centric towards react or nexjs

but it's in kind of an open-minded

library but you can have its plugin

Redux react so that you can combine it

and have State Management in the react

that's what we are looking for but why

suddenly a Redux a crash course Satish

just before you went on to vacation we

were dealing with something else yes I

know exactly that let me show you that

as well so before I went on to the

vacation I exactly remember we were

discussing that how we can actually

actually build this application idea

spark which is very much inspired from

the dribble and we're not just trying to

clone dribble here we are just trying to

have its functionality and I want to

show you how powerful next year is an

app right can be so that we can have all

of this thing all together one of the

major component I wanted to reach in

this one is of course upright of course

nexjs but the State Management as well

and I want to show you that how in the

bigger projects you can have a state

management library and make your life so

much easier so that's one of the goal

and if I click on this this is how it

works we have already seen that it

actually is much more slower in the

development process in the production

it's much more faster this is all the

project is this is all it will be doing

but one of the key aspect of this

project is the state management I wanted

to teach you the state management and if

I'll directly let you jump into this

project and teach you the stage

management there it is going to be

clumsy it is going to be really really

comesy so I'm taking up this special

video here or the segment of the video

in case you're watching all that in the

one go that where we are going to create

a fresh new project we'll discuss what

the Redux toolkit is absolute basic no

jargons here straight to the point and

we'll understand it that's the goal I

hope you like it so let's go ahead and

get started with this one so let me

share my screen first and I'm gonna go

on to my terminal and I'll first go into

one of the folder which is on the

desktop and I guess I named it as

English because these days I'm making

content in different languages as well

yes I'm bilingual in fact multilingual

yeah anyways so here I'm going to go

ahead and say npx and then npx npx come

on

and we'll be going with the create react

app and we'll be calling it as Redux

Redux

toolkit

Redux toolkit crash

is it a big name uh I'm not sure okay uh

I I understand a lot of you might be

thinking hey fish come on now let's can

we leave this create react app and can

we go to the wheat or something yes I am

aware of it that wheat is much more

faster much more better but I wanted to

make it much more friendly for beginner

in case you are a wheat fan hey go with

the wheat but I'll introduce wheat in a

later point in my in my channel I

haven't yet introduced V to the people

so I'm not interested in using it as of

now so I'll let it do its work in the

behind the scenes and in the meantime

I'll take you on to this new website

eraser by the way this is almost similar

to excally draw and I want to treat you

about how the Redux actually work

because one of the thing which Redux

guys have absolutely amazingly done is

the bad documentation like the library

is good the founder is good but still

they haven't actually done any such good

thing which makes the documentation life

easier come on people add some diagrams

here my humble request if you are on the

Twitter just take this portion of the

video and my humble request adds some

diagrams make life easier you have

already make my life easier with the

Redux toolkit there is no jargon here

it's so much easier now just add

diagrams okay so let's first understand

what is this whole thing and whole drama

is there is one Concept in the in the

entire react is known as that there are

lots of components like this is a

component and once you have this

component uh you can have multiple

components inside it so there will be

another component there and there could

be another component here and there

could be another component here so the

idea behind the state management or

having it that if you really want to

have anything inside it so let me just

go ahead and try to zoom this

so let's just say I want to pass on some

information to this inner box so this is

my uh very very inner so I'll just call

this one as inner if I want to pass on

this information I don't have much of

the ways to pass on this so this is a

component which is calling this

component which is calling this

component and which is calling this

component and the job of displaying the

information is on this very Inner Circle

or inner component itself I have only

one way that hey this box needs to pass

information to this box and then this

box oops and then on top of this this

box needs to pass on information if it

can allow me to draw it

yeah I can zoom it like this that's nice

not much actually I'm kind of a fresh

new one to this product but anyways so

what you can do is further down the road

you can actually pass on you get the

idea so the first big box actually

passes the information to the second box

the second box will pass on information

to this box this box will pass on

information to this box and finally this

will be able to display the information

uh technically in the technical

communication world this is known as

prop drilling the properties are getting

drilled one by one one by one and that

makes life so much difficult if there

could be a better solution then

obviously things could be much more

easier what could be the better solution

that if we actually go ahead and create

a global state or you can say Global

placeholder and if any point of time

anybody needs any information they can

just just Reach Out directly that hey

you guys you guys need the information

hey just ask to it directly however you

ask yeah this is how you ask if you you

need information hey you just go ahead

and apply approach it directly to this

guy yeah that would be much more simpler

but again the problem is that if anybody

can actually reach out for the

information probably they could update

the information as well and if anybody

could update the information the core

Foundation of react gets shaken down

that hey there should be only one way of

the data flow and all the UI gets

updated so there should be some rules

around how the data should be updated

and there should be some rules about how

can I read data from this centralized

store that is it my friend that is your

state management that is your Redux that

is even your zest stand or any other

thing that you are trying to learn

that's it that's the basic so in the

world of Redux you will find that there

are a couple of jargons that you

actually learn and there are not much

now they're not much trust me it's super

super easy so the first jargon that you

are going to learn about is the store

what is this store nothing the diagram

which I said here this big box yes

that's the store it keeps all the

information at a centralized place

whenever I need it I can just ask

information from it that's the first

thing that is your store now another

thing is uh something known as reducers

now this is really really nice so let me

just go ahead and write the terms first

so another term that comes and is being

used quite a lot is known as reducer so

what are these reducers reducers are

almost not really accurate to say this

but are almost like controllers their

job is to just update the things or add

the things remove the things delete the

things so all the actions or the

interesting thing that happens

uh can only be done by reducers you

cannot no longer Define the function and

click on the button and do things

wherever you like no you shouldn't be

doing that if you're using State

Management it should be done via some

reducers now what is reducer is just an

object nothing more than that it's just

an object which has a lot of key value

things each key is almost like an action

like your ad to do you're removed to do

you're delete to do so these are just

actions just like that so this is

another thing which is known as reducer

all right so once you have this reducer

what else what else is there there are

actually two more Concepts uh that

you're going to learn

and you will be seeing that I'll walk

you through with the Practical examples

as well another concept that you're

going to see is uh this guy so once you

have this one where is it going okay so

another concept that you're going to see

is actually known as oh where is my

browser where is my browser why did you

came suddenly anyways uh so another key

concept is uh let me just go ahead and

just use it

you'll using you'll be using this hook

as well I'll write this directly so that

if you are taking notes you can take

that which is a use selector now what's

the role of this you selector now

consider this that use selected is a guy

which can directly talk to the store so

when I said that your component can

anytime ask the information no no no no

they don't just directly go to the store

and use that they use an additional hook

which is known as use selector so that

they can selectively ask the store that

I need this information that's it yeah

another word that you are going to hear

is known as this so I'll just go ahead

and use this is use dispatch or some

people call it as directly dispatched

it's it's really the same no big deal

there what is this dispatch so whenever

you want to update some information in

the store then obviously we'll do it by

reducer but you cannot directly call the

reducers it will break the flow in that

case what we do is we use a hook known

as use dispatch in which we say that I

want to call a a very specific reducer

and this reducer finally gets an update

in the store that's it

told you Redux toolkit is so much easier

now yes there are a couple of more

jargons like slices and all of that but

they are not such a big deal as I'll

walk you through with the things as

we'll be building it you'll find it so

much easier to do things so this is it

let me summarize this again because this

is something something really

interesting what is the problem the

problem was simply that we were having

an issue of prop drilling if I want to

keep on passing the information into

multiple of these components then there

could be a problem that I might be keep

on drilling the props and unnecessary

passing the information for the

components which don't even need it so I

decide to create a global object which

is known as a store and anytime I need

information I can just ask it and since

that's a one source of the truth I can

just update the information to it and I

can bring on the information from it

pretty simple so for this Redux actually

came into the picture it says I'm a

state management Library we also used a

Redux react Redux to actually really

wire up together the Redux and the react

part of it and that is the library which

does it so store is one such Global

store which keeps track of all the

states and everything then comes up this

reducer reducer is nothing almost you

can compare it with the controller where

all the Logics are being written and how

we can actually use them so use selector

can directly talk to the store to bring

any information from out of it and use

dispatch is used to is used along with

the reducer to update information in

store Braille is simple Circle told you

it's super super easy

okay uh now uh we don't need much

actually from this one so by the way

this is what we'll be building up uh in

the in the long run uh in this video

itself so this is a very simple

application all we are going to do is

we'll be able to add some to-do's and

we'll be able to remove some to-do I'll

give you assignment of uh implementing

the edit part and probably more such

things like ticks and all of that you

can try that out but the goal is to give

you a simplistic approach so that later

on when we come on to this one this is

where we'll be handling this State

Management in the login section the

authentication section as well as in

these project creation section as well

so you'll find you'll find it much more

as a revision there all right so if you

wish you can read more documentation

here but I think we are all set and good

so we can just go ahead and minimize

this so this is the entire thing that

we'll be building up obviously we have

build it that's why I'm showing you the

entire demo and all of this so we'll be

going through with that okay first let

me open up these things which we have

created so this is react react crash

course all right so this seems okay

everything is looking decent I need to

inject some of the Tailwind packages as

well so let me go ahead and start this

let's go on to Google and inject

Tailwind as well

Tailwind CSS because yes we use the

Tailwind in that so installation

I'll be Telvin CLI uh no we are

framework guides do we have some guide

on react itself

create react app yeah so npm install

Tailwind then we are going to initialize

this so let me just go ahead and quickly

copy this move back to my vs code

seems like some of my shortcuts are not

working anyways so we'll be just

injecting this as a Dev dependency let's

go back on to the Chrome

and let's initialize this Tailwind CSS

so copy this go back on to vs code and

in it okay configuration file should be

generated there we go now after this

we'll be saying that hey content needs

to be updated like this so copy this go

back

and we'll be saying in the config the

content needs to be copied like this no

extra comma

all right save that and what else we

need in the index CSS we need all of

these guys so yep

go back and inside the source do we have

index dot CSS yep I'll be not changing

too much of the things I'll just keep

them as it is so just want to inject

because the to-do's will look at least

decent if we have this one and I can use

uh this one so this one should be all

good we have configured our Tailwind now

next up comes is the interesting part is

let's go into package.json and this is

where things get interesting right now

we have react and react Dom these are

the two important library to make a

react app in case you have opened up

your application with the wheat then

these are the only guys you need but now

we need to install uh the Redux part of

it so how can we actually go ahead and

inject the Redux that's that's the most

important the first thing you have to do

is go on to the docs yeah literally okay

so this is where the Redux and this is

the installation where is the

installation getting started

and

okay here is the one so npm install

Redux toolkit so don't install just the

Redux or the Redux JS now what you want

to install is actually uh Redux with the

toolkit so this is going to make life

easier otherwise yes you can still work

with it but the configuration is little

bit more complex in the original Redux

or the original react Redux toolkit is

much more easier so we'll be installing

this one as well I told you Redux is a

standalone library to interact or to

allow it to interact with react it needs

another Library so that's this Library

okay let's go back and clean this paste

it

and boom till the meantime I can just go

ahead copy this hopefully that should be

good

and that's it so till when we have

installed optionally but now what we

need is this one okay so notice here

Redux toolkit and what else we have what

else we have yeah react Redux that is

all that is all what we need in order to

build this application uh yes still

there are couple of things which you

need to do in order to make sure that

things are properly working and things

are actually going on and there are some

folder structures and all of that that

you have to follow but nothing too much

I'll just walk you through with the

step-by-step process of how it is being

done and all of that so don't worry too

much it's actually easier don't worry

I'll walk you through with the

step-by-step process

step one is to create a store okay so

let's create a new folder I'll call this

one as app some people call it directly

a store no big deal feel free to call it

whatever you like and let's just call

this one as store.js

okay how we are going to go ahead and

create a store in order to create a

store there is a method which is given

to you known as configure store so I'll

just go ahead and say that I need

something and I need it from this

actually comes from the react Redux

toolkit so

Redux toolkit no preductor.js

why is it not suggesting me

okay probably I need to reload my

application so I'll just say

command shift p reload yeah reload my

window

hopefully now it's going to give me so

I'll say import something from oh I need

to say add the rate Redux yeah this is

the one at the rate Redux toolkit what

do you need from this one I need

configure store

so this is a method which is responsible

for do majority of the things now just

alone you cannot create a store that is

an interesting concept and obviously you

need to export this so that you can use

it later on so we'll just call this one

as a store and configure store and

that's it now inside this you go ahead

and mention your reducers now what is a

reducer nothing it just is an object

nothing nothing much more than that so

I'll just put a comma just for the

housekeeping purpose and I'll just close

this one here and the method gets closed

here that is it now if you remember I

told you in the diagrams that hey now

the store is all done and in order to

make any update in the store it should

be aware of these reducers so that's

where the reducers are we haven't

written any reducers here forget about

using it via the dispatch we haven't

written that so we need to now write

some of the reducers all right so how we

can go ahead and write some of these

reducers now there are a lot of good

practices you can say or a lot of

guidelines that are given by a variety

of developers if you want to follow them

that's great if you don't want to follow

that's totally okay just a file name so

right click create a new folder and we

usually call them as features okay once

the features are there then there could

be many features in any application like

the logins authentication create a

project or maybe chat application there

could be lot so in this you divide them

based on the functionality what they are

doing so in this case we are just doing

one which is to do so okay I'll just add

it to do now inside this to do we'll

create a slice okay now that's a new

word of the issue didn't discuss that

okay I'll just go ahead and say to do

slice dot JS so one thing is clear that

it's nothing magical it's just a slice

it just is just Javascript file okay

what is this slice now slice is nothing

this is one guy which actually helps you

to create a big object which you which

you actually export as well and this

slice is responsible for tracking your

initial state of the store as well as

all of your reducers are also collected

here okay nothing more slice is just a

piece you extracted that piece and you

simply said hey this is going to be my

slice which is going to be linking all

the reducers and the initial state of

the store store needs to know what is

the default or how do I get started what

is my starting point my initial state so

this is where all the thick things

actually comes up into this one once you

see that how the slice is being created

at one thing that's it it is a

repeatable process you'll be able to do

it in so much more so will be importing

some more stuff so we'll be importing so

we'll be again importing it from Redux

toolkit and what do we want to bring in

now one thing that we'll be bringing

which will help us to do this is create

slice create slice yeah here it is now

create slice

this is the only method that is required

but since we are creating to do's and

every to-do needs some unique ID we can

store them in an array and loop through

the indexes of array but again this

might give you some of the performance

issues I don't want to talk about it too

much here but yes looping through the

arrays and providing keys and array

indexes not a great idea but hey some

people do that and there is no big deal

another thing which Redux toolkit

automatically provides you is the Nano

ID so each of the value that we are

adding we can use this Nano ID this is

almost like uuid unique IDs basically

the next step is to create an initial

State what is your initial State and

what is this initial state it can be an

array it can also be an object yeah

literally in JavaScript we are in

JavaScript realm everything can be an

object the initial state of the to-do's

is empty array it could be something

like you might want to do some of the

fetching of the database and you might

want to store something here yeah that

could be done but in this case we will

be doing that actually when will be

working on the major project but right

now I just want to keep it simple it is

absolutely easy now one thing that you

do is you actually export a slice and

what does the slice contain it contains

couple of things first let's go ahead

and Export this so we're going to go

ahead and say export const to do slice

and we'll say hey let's just go ahead

and create a slice first let's just

close this so that it doesn't yell at me

couple of things you have to do first

thing is provide a name to this because

later on it might be very confusing that

what slice denotes what one slice could

be denoting authentication one slice

could be denoting projects one slide

could be slice could be denoting the

chat app so there could be many so first

good thing is although you don't

reference it much here but later on it

could be useful especially in the in the

this what do we call this what do we

call this when you go ahead and do an

inspect element you know I forgot the

name how could I forgot the name okay uh

you right click yeah these Dev tools how

can I forget the name it's it's

important for the dev tools as well come

on man okay then the next thing that you

provided to this slice is this initial

state so that somebody can actually

track what's at the initial position

another thing that you provided is

reducers what do I call it what is

reducer if you remember what is reducers

nothing just an object yeah so reducer

is nothing much more is just an object

so let's go ahead and provide an object

there we go that is it now what does

this object consist of

this object reducer since you know that

reducer will be talking to the store so

there could be multiple reduce reducers

which will be responsible for updating

the state of the store so there is a

pattern or there is a method how you

write your reducer so first of all you

provide a name because this could be

easy like let's just say we want to add

some to-do's so let's just say this is

the ad to do and we what we want to do

is we actually write a method into it so

we'll be using an arrow function so just

like this there are two compulsory thing

that you have to pass on to every

reducer the first is actually the state

and state is something which is super

important here because

otherwise how it will know what is

initially in my store or how can I

update that state so state is important

another important item is pass on this

action I'll come back on to this action

what this action is it's a pretty

interesting as you can see here as well

action actually is something through

which you can send some data because

maybe you want to delete something so

obviously you have to pass on some IDs

so in that case we can pass on some

payload what is payload nothing it's

just data fancy name to call the data so

this is what we have now once we have

this all we have to do is how will I add

some of the to-do's that's the million

dollar question okay in order to do so I

have to provide an ID okay how will I

get the ID a super simple nanoid will

give it to me how will I store the text

here is my text and text can be

extracted from action dot payload I'm

not using any text I'll be just directly

providing an object but if you are

providing name object and all of that

I'll do that I'll not use this one I'll

just go with this one okay do we have a

comma why are you having an issue

expecting a semicolon why are you

expecting a semicolon here it is okay

why are you expecting

okay

this is generating add to do should be

all good okay

I don't know why this is having an issue

let me quickly check that why this guy

is having an issue

all right my bad my bad and let me just

fix this uh so action to do we actually

did it a little bit wrong so my bad my

bad just scrape it off just scrape it

off so coming back again so how we are

going to add the to-do I probably was

thinking ahead of me that's why okay

let's scrape it for off again so how

we're going to add to do to do takes

help from the state to know what is

there already in the store and some

action and through the action we can

pass on some data we can pass on some

information with it now in order to add

the things what I need is I need to

create an object a single to do that

single to do can be pushed on to an

array what array the array which is to

Do's that's all we have to do so let's

create a single object so const to do

this is a single object this is a single

object what does this single object

includes this single object includes

I'll just first remove this this single

object includes two thing a unique ID as

well as

yes you got that you got that right the

payload the information what to do we

are storing so let's just go back here

ID nanoid and then the text which is

going to be action dot payload that is

it but right now we have just created

the to do we have extracted the

information from action we haven't

actually used the state to push it into

the to Do's so all of this initial state

is actually stored or somehow linked

with this state the moment you say that

hey I'll be doing this estate and who is

doing all this Redux yeah Redux behind

this thing or behind the scene since you

marked it as reducer automatically will

inject this entire State the global

variable into this state and now all you

have to do to access this is now your ad

to do is this constitute is ready so

let's just go back and simply push it

that's all so I'll be saying hey this is

the method this is constitute so let's

just go ahead and say hey state in this

to Do's push to do

that is it told you it's really simple

that how we actually do this I even do

not have to worry with the classic old

saying of the Redux that never mutate

your state I don't care about it

automatically this Redux toolkit take

care of that thing so in case you are

coming from the background which

somebody who knows about the Redux I

don't take care of this now

so how simple is this all right so uh

let's just try to add one more and I'll

leave couple of more for your

information or for your practice as well

I'll just go ahead and say hey let's

just go ahead and add one more which is

removed to do again what we have to do

is simply a method I'll adjust the

revision

what does this method has it has an

access to State it has an access to the

action through the action I get the

payload so how can I remove this in

order to remove this obviously in the

action you might be sending me the ID of

that to do so that's pretty easy

although there is a suggestion really

nice suggestion but let's go ahead and

make it a little bit easier and do

something which we usually don't do

let's just go ahead and directly say

state DOT to do's and in this I'll just

say state DOT to Do's filter filter out

on each element and whenever you see

that create a new array in which don't

include the ID that you are passing me

how simple it is I don't even care that

whether my state is being manipulated I

don't even come up come back here in the

earlier days I used to come something

like this hey they're going to be a

state so I'll be just getting a new

state and then we'll be using triple dot

I don't do any of that now all these

things are gone

these are the things of the past I'm

super as you can see I'm super super

happy and excited about this uh simply

you can go ahead and add more things

like update and all of that and all

those classic saying never mutate your

state I don't care I don't care okay uh

so I hope you have enjoyed this that how

we create the slices now there are a

couple of more things that you have to

do in this slice itself okay first of

all you have to export a few things so

first we're going to do is export const

all the methods that you have created

like add to Do's remove to Do's you need

to actually export them as actions

because one more time let's go back on

to uh the browser here so as I told you

that reducers will be talking to store

using dispatch but we also learned that

all the things that we are doing this

action.payload

yes this is also important so we'll be

using them later on right now I'm not

telling you where we'll be using it how

we'll be using it but just all the

methods that you create here all the

reducers you created you need to export

it and by the way this whole working

this whole functionality all of these

things you can move them into separate

file and all of that there is no big

deal there okay moving on you have to

export one more thing which is export

X export

default will be using a default here if

you wish you can use to do slice.reducer

so we'll be we are actually exporting

the each methods which are there in the

reducers as well as we are actually

exporting the entire reducer as well and

this brings a question that hey why are

you bringing this entire uh slice and

the reducer as well because

this thing this here last line the line

number 28 this is something that needs

to be wired up with the store yep so

let's go back on to our store store here

and we need to wire this up notice here

we were mentioning these reducers as

well here so what I'm going to do is I'm

going to go ahead and say import to do

radio what did we call it as

to do slice and we are actually uh

we'll be importing that as a to do

reducer feel free to call it anything

and we'll be importing it from the

features to do and to do slice okay once

I have imported this because this is my

reducer if you remember this these are

individual methods but reducer is this

whole thing this whole thing my store

should be aware of this so I can just go

back here now and can say hey I don't

have if I would be having this as an

object or I would have many which I'll

show you in the project the bigger

project as well but right now I can just

go ahead and say to do reducer

okay that's it my store is now ready

my store is now ready and it will be

reflected very soon in the dev tools as

well but this is all good now if I go

back and check it out this my feature

list is also ready now at least my

functionality part is extracted and any

of my component can actually go back and

ask this state this to do he can reach

out to that directly of course it has to

use the method as well to actually reach

out that we just saw this use selector

so it has to use that method but it can

actually Reach Out directly not only

that if any component needs to add

things or remove things it can also do

this they can also use this use dispatch

any point of time and since these

methods are also being exported I can

import these methods and can just use

use dispatch and that use dispatch using

these reducers will talk to my store

how simple how convenient this is okay

so this is the basic overview of all the

things that we have and again we don't

have to do any kind of mounting we don't

have to do any kind of a wrapping or

anything like that we'll be just going

ahead directly and writing our

components itself so now let's go ahead

and write our components which will be

just an input box a button just like

that so that's Basics let's go into that

all right so I was just sipping some

iced tea you need some break after such

a long video okay so now we are back on

to the situation we have learned how we

can create a store we have learned how

we can create a reducer we also have

learned how we can export the reducer so

that our store knows about it also we

have exported all the individual method

out of the reducer so that I can use

them anywhere I like so far this is the

status now let's see one by one how we

can actually improvise over it and make

our Learning Easy so I'll close this

I'll close this

now basically you don't need to do much

and that is the best part now go ahead

and do your regular job like creating

components that's one of our job let's

create a folder and I'll create a

components inside this I'll create the

very first component so I'll break it

down into two parts because in this

entire application we have been focusing

on just two things add the things remove

the things we are not focused on updates

and all that you can try them on your

own because once you know how the

how the deletion is done you know how to

carry an ID with you and can perform an

updation as well because you don't have

to worry about the state mutation just

do randomly how you do it okay first

thing let's see that how we can add a

to-do because in the addition part we

will learn just one portion individually

that in the ad I just need to collect

some data and send it so how can I send

it to the store I have to use a use

dispatch that's all in my mind nothing

else okay I'll right click and create a

new file and I'll call this one as what

should we call okay where did you go

where did you go no please don't go

anywhere Okay add to do so let's just

call this one as add to do dot JS there

we go uh rfce react function component

export sounds good okay

obviously we'll be tracking the states

so uh we'll be saying use a state just

give me that that's all Basics that's it

now the interesting part from here that

starts is how can I collect some data

and send it to that okay if I am well

aware and well versed in the react

getting the data from the form and

putting in the U State no big deal no

big deal but collecting the data after

from the state to sending in the store

that's a new knowledge okay how can I do

that first thing we have already learned

that you need a use dispatch use

dispatch that will be coming up from

react Redux it doesn't come from the

Redux toolkit it's a wiring thing yeah

that's where it comes from and also

since I'll be sending this data I need

some method to do it where is that

method where is that controller no I'm

not going to write a controller just

here in this component because I don't

do that yeah that's exactly where you're

absolutely correct that I need a reducer

for that and that's exactly the reason

why we actually went up into this

features in the slice and exported them

individually yeah now you're getting it

I'm super proud of you all right so

let's just go ahead and say import add

to do Redux and action so

okay we didn't actually brought them in

the actions did we

to do slice dot action so come on man

you're doing uh and we won't be bringing

it up here is it going to come from here

uh probably not so we'll be just saying

add to do it will be coming up from the

features to do and this uh to do slice

so let's just say features this is

really bad sometimes Auto suggestions

are really really horrible so we'll be

saying features and from to do and to do

slice

uh we don't need to say dot actions here

we'll see that how we can actually make

it a little bit easier for you for the

actions and all that part uh I'll come

back onto this one a little bit later

right now let's just have this okay so

two important information is with us use

dispatch which will be using this ad to

do and we'll be getting this okay next

up is how can I actually have this ad to

do for this now the things are super

simple first of all control your inputs

so let's just call this one as cost and

let's just call this one as input

suggestions no suggestions

set input and will be keeping the status

empty as of now then you have to use

this use dispatch hook this is how you

use it cons dispatch use dispatch so

that we have extracted it okay now we

have to create a method but hitesh you

said we don't want to create a method

yes you don't create a method to update

it but you create a method so that you

can collect the information uh wrap it

up and send it to the Handler which is

going to be the ad to do so for this we

say add to do Handler just like this and

what we're going to do is first and

foremost let's close this so it doesn't

yell at me we want to prevent the

defaults so event dot prevent

suggestions no suggestion prevent

default what after that nothing you

simply dispatch this is your ad to do

and in the add to do all you have to do

is just pass on all the information that

you want to pass on all the information

that you'll be passing on is actually

will be taken here in the text format

action dot payload that is it that is it

that's all it takes in this case I'm

going to just directly say that hey you

directly take this input and that's it

be happy with it whatever we haven't

done any kind of sanitization or

something but once we are done with this

obviously we want to refresh the input

so that's basic that's uh so I'll be

saying set input as empty that's it

now whatever goes in here that's just a

CSS so I'll be just directly copying and

pasting it from the notes that I have

because it doesn't add any value it's

just a form I'll explain you no worries

I pasted it because there's so many of

the class name and just keep on writing

this class name it's not a Tailwind

class it's just a simple all we are

doing is we are having this value linked

wired up with the state which is input

and on the change we are actually using

the set input event.target value so we

are actually putting this up and as we

are saying type submit one thing we have

to change is this method name because it

was suggested to me so no big deal we

can just simply say add to do Handler

and that's it and that is it so I hope

now you can understand there is no prop

drilling I am not sending it anywhere

I'm just going through with two things

and this is so much repeatable get your

dispatch and get the method where you

want the functionality to happen that's

it rest all the functionality is my in

my slice yep that is why this is called

a slice I call this as controller as

well because that's exactly what it is

doing and I don't have to keep how many

values were there already should I be

updating do I need to get a fresh State

nada nothing at all all okay now we have

actually seen that this is how it is

done

another portion of this tutorial which

is remaining is okay I know how can I

send the data and I probably can send

this data as to Do's I also can send

data for more things I'll walk you

through with the deletes and all of that

as well by the way there is a delete as

well sorry forgot to actually mention

that from the notes uh by the way in

case you notice this is the ad to do

I'll walk you through with the delete as

well we'll be working on the delete as

well but coming back coming back now we

have seen that how can we actually go

ahead and use that to do and send the

data now we also need to learn how we

can read the data from the store again

it's also almost like a two-step process

that's it okay for this we'll be

creating a new component new file and

let's just let's just let's just call

this as to Do's because that's where

major leads will happen to dos.js

rfce react functional component yeah

that's that's all okay first and

foremost what do we need to read from it

if you have if you remember from the

notes use selector is the one which will

be responsible for reading from it okay

so let's grab it no problem we'll be

saying uh use selector from react Redux

there we go this is it we'll be applying

the delete part here as well but I don't

want you to confuse with it right now we

are focusing just on one portion how to

read the data that is it that is my goal

okay how can I read the data

all I have to do is to read the data is

first of all let's come up here and all

I have to do is use selector this use

selector has the axis of the state and

by the way this use selector looks like

this which has a callback it goes like

this

just like this and in here you have an

access to State Redux injects it I don't

okay if I have access to this state I

can go ahead and say hey State just go

ahead and there would be many there

would be many to Do's here so I'll just

first go back here and actually make

things a little bit easier for you so

inside this I'll be just saying ah this

initial State this is the one that I

want to track and this is the one that I

want to grab okay so rest of things

looks easy it looks good okay let me go

ahead and just bring this back

all right hey back okay so we were

talking about this use selector now

before we actually talk about this use

selector I'll walk you through with that

and you selected is nothing it just is a

method a simple method which actually

takes a callback in which you have an

access to state but what the state is

and what's happening so far things can

be a little bit confusing at this point

so what I'll do is I'll actually remove

all of this this view selector I'll come

back on to this one don't worry we have

to write this obviously but one thing

that I want to see is now that we have

seen so far if I go back on to this

diagram that we saw is that all of my

components are actually aware of this

store how that's even possible just you

have created a file and is Redux

injecting some magic no that's where you

have to do some of the magic that you

can actually go on to your index.js or

wherever is your root file or root

folder is and here you can actually have

a wrapper so I'll just add this one at

the very top so I'll just go ahead and

say I need a provider

yes that's exactly the name provider

that comes from

from react Redux so this is the provider

how do we use this provider actually

it's super simple all you have to do is

this is our app wherever your top level

of the app is make sure you actually

wrap this provider on top of it so this

is all you have to do is provider and

you have to pass on a store and then

simply go ahead and add provider just

like that that's it this is all what we

have to do but again looks like there is

a problem it says jsx element provider

has no corresponding closing tag yes

there should be a closing tag there we

go all right now in this provider we

actually mentioned this store and that's

why I say that usually you only have one

store uh yes there could be exception

very very rare exception but since I've

seen it that's why I'm saying there

could be an exception but now there is a

store okay so the store is there put

next now is the time that we actually

see our application that how it is there

so I'll just close this and npm start

run and there we go and seems like

nothing it says a store is not defined

my bad we didn't brought in the store no

big deal no big deal we can actually

bring in the store from the app that we

created so let's go ahead and say import

if I can write that

import store from App Store so it should

be all good now if I hit a refresh and

imported as store is not found in the

App Store

inside the app store.js

we actually brought in the store

did we forgot to even export that no now

it's working okay now the interesting

part is you can inspect this and by the

way you have to install this Redux Dev

tools these are super helpful and super

important and you can find them just

here in the Redux now if I go into the

Redux I can actually see these actions

diffing and state if I click on the

state this is where my to Do's are

yeah this is the most important part

that I have my to-do's here and this is

one of the most important thing that now

since my entire application is aware of

it I can just go ahead and read from it

not only that we'll do some magic here

let's just go into the slice to do slice

and what we'll be doing is we'll be

injecting an object here the first part

is going to be ID we'll be calling it as

one and we'll be adding a text uh we'll

be saying hello we don't have completed

and all of that so we'll be just saying

hello just like that

and save that

let's see what happens to our store now

as we can see that this is is there so I

can go ahead and extract my to-do's at

any point of time I can just go ahead

and call state.actions and it's

available to me that is the fun part

okay let's go back up here now I'll go

into to-do's and I'll say hey I want to

actually use it so how can I go ahead

and actually use it again same thing we

have this use selector so let's go ahead

and use selector it's super simple we'll

be saying use selector there we go it

has a state which can get state DOT to

do's and we can hold that in some

variable let's just call this one as to

doosh and there we go obviously we would

love to do a console log here as well of

the to-do's that what's actually is

there so that we can see it says logs an

empty array this is again an extension

that I'm using that I wanted to have

this but why this is actually logging me

an empty array

I know that in my initial State and this

is also saying that hey you are having

all these things going on in here now

there's an interesting thing to do and

if I go ahead and say dot to Do's now if

I save this

and go back and try to do a console log

and let's hit a refresh here

and we should be getting some things up

here

okay so not this one I didn't expect

that

okay looks like some things are

interestingly going up here let me

quickly check that that where I'm making

a mistake here yes definitely I'm making

it we're back after a crash and thank

goodness the video recording got saved

anyways yes I fixed out the bug as well

by the way I'll walk you through that

how I actually fixed it so uh turns out

the issue was that I was actually never

loading this to do so the to-do's that

we were having I was never loading it at

all so what I need to do is simply go

into app.js and I mounted this to Do's

here that's that's all I did and by the

way I'll just remove this header and

everything so that we just have the

to-do's up here and we have this to do

input add to do as well so let's go

ahead and add that component as well

since we are here already so we'll just

go ahead and say add to do as a

component that's it so that at least we

can see all the things going on so there

we go we have this add to do's and we

have all the to-do's being mentioned up

here uh the thing the interesting part

about this I'll reload the application

is the problem that we were facing is

inside the to-do all we were doing is

use selector by the way don't go with

the X9 because I hit a reload multiple

times so it's giving me those reloads

but again we were able to extract this

just with the saying state DOT to Do's I

was able to do this because I looked

into the Redux and I said Hey in the

state how many values are there it's

just one to Do's so state DOT to do's

and inside this all my values are there

so I'll just say just let's store them

into a variable so I call this as to

Do's now all that's remaining is to Loop

through that and that's really really

basic so I'm going to go ahead and just

show you once here that we can actually

go ahead and do that now then we'll do

that in a easier and better format and

all of that so we'll just go ahead and

inject just like this and probably we

should not do this

we should first wrap this up inside this

and let's just go ahead and extract this

cut this out paste it up here and then

we can go ahead and inject this then we

can go ahead and say hey to Do's all you

have to do is just map through it and

while mapping through it we can simply

go ahead and say Hey I want to map

through each individual to do I'll be

returning a

a component just like this and once I'm

actually going ahead looks like there is

an issue this is to do returning there

is one more

Auto suggestions hate them sometimes and

all we have to do is simply get an

paragraph or an ally I'll right now grab

just a div okay that's nice Auto

suggestion love them sometimes since we

have uniquely added the identifier with

the Redux nanoid to do uh the uuids then

it's much more easier to do it and if I

go back here we go the hello is there

which we added up there so that's super

super easy now if you want to do it in a

much better way so that it looks really

nice so then in that case I'll just go

ahead and give you the code that we

wrote so I'll just go ahead and add this

just like this

and it's doing basically nothing all of

this so right now I need to actually

remove some of the things because this

button shouldn't be working as of now

because we haven't discussed that okay

and this part should also be removed

okay we'll come back on to this part as

well

okay now we are doing this all of this

this is all doing good hit a refresh and

it says hey there's on click

I'll remove the unclick

okay save this and there we go we should

be changing the text to text White

where the text is

and this should get some class

name and we'll be saying text Dash White

all right so there we go now I hope you

are able to see it it's looking really

bad I haven't added much of the things

but yeah so notice here you now actually

are able to see all of the things which

are happening now if I go ahead and add

another to do so I'll just go ahead and

say another to do and I'll just add this

and notice here it says add another to

do hello and all of that so this is

again getting looped through and all of

that so yes there is an issue for that

react strict mode in the production mode

and whatnot but this is really really

nice that I can go ahead and add one

more click on this ad it actually runs

the things again here for me we'll

resolve this one as well but by the way

this is looking already so good and so

nice that we are actually able to do

this okay coming back on to this part uh

where we having this selectors and to

do's and all of that so let's go ahead

and resolve this part as well

all right so it was the easy fix what I

was doing is actually not properly

looping through it since just to show

and demonstrate and explaining all these

things I was just putting the keys

somewhere in the bottom which is not a

good thing so I just need to put the key

which the element is looping through

which is this list item so I added the

key here and it fixed all the things all

right so moving further what do we

notice here what is happening okay so we

saw that it's really actually easy if I

go ahead and remove this console log now

so that we understand the things

actually in order to query from my state

or my Global state or my store it's

actually much more easier than

dispatching even in the dispatch it was

a two phase process here it's just a one

phase process have the use selector use

selector is a method which gives you

access to the state which is an object

and just grab whatever you need from it

state DOT to Do's state DOT token state

DOT uh projects maybe whatever you need

you just simply put a dot and get an

access to it once we have an access to

this just simply Loop through this make

sure while looping through you know that

if it is not empty if the array is empty

you handle all those cases that's super

easy part okay one thing that is still

missing in the part is to show you

that okay I know that this is going nice

here I can just go ahead and add a test

here it works nice hello and test I have

seen that how can I send the data in the

store cool if I right click here the

store is getting updated all the time

inspect and go into my Redux I check the

to-do's there is a zeroth item there is

a first item which is unique IDs and

test okay that that's working fine I

have also seen that how can I actually

extract the data from the dispatch use

reducer dispatch all good all good but

how can I actually mark this as delete

because this is a combination now and

this is super easy and if you have so

far paid attention at least in the part

where we had this ad to do this is

exactly the same process what do we do

we bring the method we simply use use

dispatch so let's go ahead and copy this

exact same functionality so copy this go

into the add to Do's let's bring the

functionality this time do we want to

add reduce no this time I don't want to

do add to Do's I actually want to have a

delete to do or did we call it as remove

to do yeah remove to do so I have my

method I have my use dispatch okay but

how do I use use dispatch let's cheat a

little bit let's find how we did it in

the air to do in the add to do we simply

said const dispatch dispatch all right

all right let's go ahead and copy this

let's go move here and there we go

dispatch that's it now whenever I want

to use this remove to do I have to use

it via the dispatch okay wherever I want

to use it in the button itself where it

says all this rounded and all of that

what not this is the button what should

I do on click so on

click there we go and all you have to do

in this on click is simply call the

dispatch that is it but we cannot call

the dispatch directly because we have to

pass on some method because hey if you

remember the classic 101 if I call the

dispatch here it will be passed on as a

reference but if I want to pass on some

values I have to use this I cannot do

this directly so in order to do this I

have to use a callback here so this is

my callback

there we go I have a dispatch now in

this dispatch what is the method that

you want to use remove to do this is a

method and what does this method takes

the ID so I'll just go ahead and say hey

to do since I'm looping through already

through it and I'm calling it as to do

I'm going to Simply go ahead and say to

do dot ID and that's it and do I press

the tab no I don't press the tab it just

messes it up I hate this

and probably okay now we need to count

them come on

yeah that's good now okay

save this notice here how easy it is

dispatch the reducer that's it all done

so it makes your life so much easier

let's go back on to this part and now if

I try to delete the test test is gone

it's actually gone from the store so all

the thousand places where this was being

displayed that's gone that's gone from

the reference and yes this is it let me

just give you a summary of this in case

you want that so the idea behind having

a Redux and the Redux toolkit now is

things first of all are very simpler the

step one is to create a store we created

a store we simply said that hey I'll

give you a reducers I don't know what

reducers are right now but I'll give you

in at some point of place and one thing

that we actually learned at the very

last is all of your components should be

no should be aware of the store so

that's why we go on to the index.js and

simply wrap your entire application with

the provider that's a must have to do

with this so that's the step one and two

a wrap create a store and then wrap

everything with the provider here that's

simply 101 we did that the next step

comes up is to Define your functionality

that we call as slices slices not just

functionality now it's a much bigger of

an object how do we create the slice the

step one is to Simply first and foremost

declare your initial State how your

state will look like when the

application will start once you have

done this then simply go ahead and use

the create slice method which is a new

method available inside the Redux

toolkit once you have this you have to

provide couple of things provide a name

to your slice because there can be many

slices provide a name like to do good

name provide it an initial state which

you have declared just here this is just

an object and then provide a list of the

reducer as many reducers as you have

just provide that most important thing

is export your reducer out of this to do

slice that whatever the to-do slice you

are creating export this reducer this

will be used in store also export all

these individual method because wherever

you are going to use the dispatch these

individual methods will be useful now we

know the picture okay once this is done

that is it that is it now we have to

learn how we can use it we first

actually learned the use cases in the

attitude so how we can add to add the

things first of all we need to talk to

the store and we need to send some data

to it so obviously we'll be first step

one is to use dispatch and then what

functionality you want to use use

dispatch is simply just create a

dispatch out of use dispatch and then

simply say dispatch an action which is

to do and take this data with you and

we'll be able to extract this data

simply in the payload we know that

and how we can actually extract the data

this was sending the data in order to

extract the data it's simple process use

the use selector use selector has an

access in the Callback of this state and

this state will actually give you the

state DOT reduce or state DOT token or

state DOT authorization whatever is

there everything is available to you

this is really a lifesaver so this is it

this is your kind of uh you can say a

crash course on the Redux toolkit I've

tried to make it extraordinarily simple

so that when we actually make that

next.js app with the app right we can

actually take advantage of this state

management and the life will be so much

easier this video recording was with a

lot of hiccups a lot of phone calls uh

crashed it once but thank goodness the

recording was saved but I think we

finally made it it was a good job if you

appreciate such kind of videos there's a

lot of effort that goes into them please

please please just leave a comment an

emoji would be really nice or just a

thanks it would be really happy all

right that's it for this video let's

catch up in the next one