Transcripts
1. Introduction: Hello and welcome to
this course in which we are going to learn
modern Redux concept. That is Rudolf toolkit
with religious, My name is Rachel and I will be your instructor
in this course. So if you are a React developer, then you might be using the derivative as a state management for you react application to
maintain application state. And you might be also
using redact tongue or redact saga middleware to handle side effect
in your application. Recently, redact team came
up with the new approach to write logic in more efficient when they
launch read a toolkit. And with this tool, things
become much easier. I thought to create a new
course on this topic. Because this area
ydA toolkit library allow us to implement redox in much easier and
concise way then it used to be. Now, let me give you
the brief overview of Rudolf to those of you who
don't know what it is. That failure is state
management library that we use in our
React application, as well as you're going to
use within your application. Not just with React, but it's very popular. The React library, that's
the overview of the reduct. So let's understand what we are going to learn
in this course. First, we will start with
some theoretical concept. Like we will try to understand
the core problem of React and why we use
Redux within react. Then we will understand
like what is a toolkit and what APA including said
this redact tollgate, what is create a think tank. So all these concepts
we are going to understand with
the help of puberty. After that, we will
start to build our application with the
help of redact tool create and create a think tank in
which we are going to perform all crowd operation with the help of JSON
placeholder fake EPA. With this application, you are
going to learn how to make that post PUT and
delete it with create, I think middleware in your react redact
Toolkit application. This application we are going
to build in this course with the help of reduct
tollgate in React. Now, let's talk about the basic requirement
for this course. This course is designed in
such a way that anyone can join this course who are interested to learn
modern redox concept, you just need to have basic
understanding of HTML, CSS, JavaScript, as well
as React basic knowledge. At the end of this course, you will have full understanding of reduct toolkit concept. And also you will be
able to implement redact toolkit in your any
existing React project. And also you will able to convert those React
redux project in which old Redux code while Britain into
reader tool could. What are you waiting for
joining this course in order to learn all
these modern concept? And if you have any
query or suggestion, then you can always
reach out to me. I will try my level best
to solve your all query. So that's it. From my end, I will see
you in the course section.
2. What is Redux & why we use it ?: In this video first, we will understand
the core problem of React js estate management. We have our main app component. Then we got our sub-component. If we want to change a text, then we cannot do directly. Instead, I have to inform a parent and change
the text there. And if I got
additional component, then it will get
even more complex. Therefore, we have a read of which have a
different approach. So here we have our
view, our application, and in this application in any given component will
dispatch and action. Then action brand
through the reducer. Reducer rather
simple job or task. It will take an action, then it will take
all the manipulated, and it will give a new state. This manipulation will happen, bake on the immutable. That means it won't
change the old vector. It will take all the circuit
as a basis and then create a brand new copy of
all depicted with the changes in ploidy
did stay untouched. We just create a new lifted
and return this new state. This immutable gives you a unique state in
your application. Now we're getting a new
state can be reduced it then it will get
stored into a store. And we will have only one
store in our application. This vector has a
one simple task, push toward our state. That's why it's called Restore. You might have a
multiple reducer, but we will have only one is
stored in our application. Then our application
subscribe to this store. Whenever it's
dated, get updated. New state park to the store. The store will automatically
send it to all the component and directed and the
application will get updated. Now, let's back to the previous example where we had our app component
with other components. And now we also have a store. Now if we wanted to
change something, the user component
from MainComponent, then we will
dispatch and action. Then the state introduce it. And then we path is dear
to all components in this data all about
what is reduct and why we use
Redux in React js.
3. What is Redux Toolkit ?: Now let's understand what is the total create reader
to liquidate also use for managing application if 13 a React application
in efficient way. It's provided some
batteries included toolset for efficient
development. This batteries
included toolset term, look a little bit fancy here, but you will understand
this term later. So root x was already
popular option for state management in
our React application. Then why redact
toolkit is required? With redact toolkit, there
was so much code required to configure if to
optimize that basic level, and thereby too much
boilerplate code, which makes our code, let's clean it efficient. Also, too many packages need to install to build a
scalable application. With traditional redox,
we used to write action and reducer
in separate file. And this become more
complex when our app and get you to address
this challenge, redacting came up with
a reader toolkit. Redact tool kit is
a better approach for writing rid of logic. So overall, the reader
to look good if period of development by including rid of Courbet
redact tool kit package that they think are filled to
build a reader application. Redact toolkit allow
developers to write simple, clean Redux code. So this is all about
redact toolkit and why we use with React. So I hope you understand
this fancy term now that is battery
included toolset. So this is all about toolkit. Now let's understand
this reader to look good with one basic scenario. Suppose we have to build
a contact application. We have to manage
it is still five. I'm going to show you the traditional approach
with traditional reduct. So we usually read reducer and accident in a separate file. As you can see that here we have x and dot js in which
we have a two x ten to increment the counter
value or decrement the counter value and
introduce a dot js file, we have a logic to
increment a counter value or decrement the counter
value of the Theta. Traditional redact. Suppose now let us see how we approach with the
reader to look good. In redact tool, we could rewrite our reducer and action
in the same file. You can see that we have written our action at reducer under the Create slice through
the toolkit approach. And you can make the
code much more concept by using create. Both the reducer and I can, can be written like
this way under the live by seeing this code, define a grid with it and
action become cleaner. It data to look. There is no longer need to
use the switch statement to manage the action with its
corresponding producer. And another thing you
might have notice here, like we have now directly
mutating the value in the reducer function instead of returning a new value to update. This actually happened because
the redact tool could use the library which allow rioting the mutating,
logically, reducing. This is all about
the reader toolkit with the basic scenario.
4. Understand Redux-Toolkit API: Now let's talk about this
rudder to lucrative. It include holding this API
in radar toolkit packet. Let us start with the
first one that is configured to set up our creative tool to provide a simplified configuration
option and good default. It can automatically combine your slides reducer and you
can supply any middleware, whatever you want with redact. Cool, good, riddance,
thank included by default. And it also enabled the
user reader delta f times. And there is no need
to write code to configure reduction in dev tool with reduct Toolkit package. So you just have to install the Data Dev tools in
your Chrome Roger, the reduct table automatically work with the reduct
table. Good package. So this is all about
the configured store. Now let's talk about
disk create the reducer. Basically it simplify writing our redact the reducer
function logic because it use IMRT
library internally to update its state
imitable by writing new derivative code in
your reducer and support directly mapping is specific
x anti reducer function that will update the state
when the action get dispersed. Supply a lookup table of
action type to create the reducer function rather than writing switch
case statement. Now, let's move on and talk
about the create action. Create tension with negligent written action creator function for the given tag with drink. And it can also be used in
a place of type constant. Now, let's talk about this. Create, select, Create select
Azure function that accepts an initial state and object
of a reducer function name. Then it automatically
generate a X and created and acts and type that
correspond to the reducer. And so overall, this
creates slides. Apa is the standard approach
for writing our Redux logic. Now, let's move on and talk
about the creative thing. Turn to create, I think. Thank you. Used to perform asynchronous task with the
reduct Toolkit package. This function normally
accepted three parameters. The first parameter
will be x and type, which will be in a ring. The second parameter will be the function that will return a promise generated thumb that will disperse
either pending, fulfilled, or rejected action
type belt on that promise. And the third parameter
will be the Option object. Now, let's talk about this
Create Entity adapter, generate a set of
reusable reducer and selected to manage the
normalized data in the restore. This is all about the
reduct toolkit, a BA, and we will understand more about this API
like create slide, create a think tank, configured a tour in detail. 1 fifth, start building our application in
the next section.
5. Understand createAsyncThunk: Now let us understand this
creative thinking. Intuitive. Whenever we have to perform
a task, we use middleware. Middleware could be anything. It could be either a
reductant or redact saga to perform asynchronous tasks
and deducting middleware, either popular package with the reader with redact toolkit, reductant is
included by default, allowing creators
intent to perform asynchronous logic
before sending the process result
to the reducer. Here we have our
sample code and I will give you the brief overview
of this sample code. Now, I will first talk
about this create slides. So slightly the function
that contains your code and reducer function used
to modify a store data. So overall in third, it creates live API. We write our reader logic. So here you can see that
we have one name property, so this is nothing but your
digits lightning fast. We have to provide a slide now inside this creates slaves. Then we have to
provide initial state. Here, we define our initial
state for our application. So here you can see
that we have initially state-like entities
and loading false. Now we have a
reducer object here. Inside this object. We handled synchronous requests that may lead to the store. Now, we have activities
in extra reduced. We handle asynchronous,
which is our Min. Okay, So I think Ronnie created with creating I think ten
step three parameters. The first parameter will be
the X and type of drink, and the second parameter will be a function that
return a promise and generate a tongue that
dispatch spending full pillar rejected action type
based on that promise. And the third will be
the Option object. Individually with Italy,
we provided different, different configuration to
our create a think-tank API. But the third parameter,
agent oxygen here. Whenever this action,
good dispatch from a component within
our application. So create anything can generate a three promise life cycle using the same type of
string as a prefix. So here you can see that
it doesn't generate a pending fulfilled in, dejected. And all this lifecycle we with available inside
our extra reducer. So all the three promise
lifecycle that is generated by creating ten is going to
evaluate in fact our reducer. So generally what happen on initial call create
a think tank will dispatch this action type, okay, and that is pending. And then we will have
our payload created, which will execute to return
either a result or error. In case of error, create, I think then we'll dispatch
an action with the redacted. If our dataset is successful, then creating ten will disperse this action
type that is fulfilled. And all three
parameters lifecycle, we will be evaluating
inside this extra reduce our object where we make our desired changes
to the store. This is all about
the creative thing.
6. Project 1 - Set-Up: Okay, in this project
we are going to use the JSON placeholder fake API to build our credit
application with the help of reduct toolkit
and create anything. So we're going to use this API, like getting the post
based on the ID. We're going to use
this API in order to put a single blog post. And also we are going
to use this fake API. Do update a single port and
based on the ID and at black, we are going to use DCPA to delete a single
port based on the ID. So overall, we are
going to use for a PI with reduct toolkit
in this project. Let's set up our project first. I'm in this directory and I'm going to open
a command prompt. I'm going to create
a React project. Be it react. Apa. You can give any name,
whatever you like. Let's create this project. So it will take around
two to three minute to install all the
NO3 dependency. And I'll be back with
the whole processes. Good completed, guide our
project setup now completed. But first let's go into this
directory that is correct. Apa toolkit. So before
we do npm start, I wanted to install some
packages for this project. So I'm going to install
packages like that. So we're going to use and
design to build our component. Then we need to install
a reductive toolkit. Last toolkit. And we also need React router. Only three packages. Is it required for this project? So let's install
all these packages. Meanwhile, I will open this project in
Visual Studio code. So guys, it's looked like are
all package installed and I have already opened this project in my Visual Studio code. So let's go into the VS code. As you can see that this
project is open in my VS Code. And here we have packaged slide. Here we have a package like and redesign the redact
tool, kirtan, React router down, Guys, in order to use and on-demand component in our React project. First, we need to bring the
ant and design CSS file in order to use
the Android design component in this reactor. So I'm just going to bring the
antidepressants, CSS file. A CSS file we need to
bring from our antibodies and then only we will be able to use the antidepressant
component.
7. Project 1 - Structuring our App: Now we're going to do
structuring our project. I'm just going to create
some folders here, like we are going to have
unfolded like a user post one folder bit heterodox. First, let's say
digested some route. I'm going to have and
that's dot js file. Create post dot js file. We're going to have one
more file loading guard dot js file. In order to show the
skeletal loader. We have created this file. Now, let's generate a snippet. First. We have this create post
this index.js file. We are going to fit the pose. We can update the poet and
we can delete the post. All these things we are going to do in this index.js file. Generate it in a bit. Let's give here only
inhabit JS file. Let's remove this one logo
we are not going to use. Let's remove this whole part. We're going to bring from React router switch
routes and routes. From React router down. We are going to bring routes. We need route browser router. Basically we are going to
register this to route. That is create an index
dot js file, okay? This will be not index.js file. Let's give like home only
ingest right here, routes. Here we are using React Rotterdam vergence
six. You can see that. So that's why I'm using
routes here not so much. I hope you are aware of those
changes with respect to the latest version
of React router down here exactly is
also not required. So we can just keep path
state of component. We're going to use
element first-time, going to reject it
the home route hour. The next route. We are going to have like create, create. Both. Whatever the poem you are going
to create is not going to save in adjacent server because the ethyl
is a fixed server. So here we are just
mimicking the, all the requests like get, put, post and delete. You weren't able
to save any data. In dB. We have rejected
dish to route and let us also do like
browser router as well. Let's syrup this entire
app browser router. Let's remove this one. Let's first do on-premise start. Let's start. Now let's wait for the application
load into the browser. So guys, replication is
loaded into the browser. Let's visit this route. Bush also, whether
it's working or not. This is also register. We have successfully
register our two routes.
8. Project 1 - Working on Form: Now I'm going to start
with the fetching the Porsche based on
the ID five times, going to create one input field and the button, two buttons. I'm going to start
working from this file. But we have to do now to bring some component from our design. Let's bring those
components first. The component we're
going to bring button, a card, input space. React when IT to bring
users data and use effect. Since we are required
to finish the port ID. So we need to define
a state with ID. Id. Id. Let us give you a like
you just did return. We have to define one
class, width container. And after that, we're
going to have a heading. So basically we are performing
the phage post script heading style, inline style. Now, after this heading, we're going to have
an input field with placeholder, like user ID. With JSON server. Basically we are going to
pass any random ID and we will get a post
like title and body type will be the number on change
we're going to give. We can just do like set. It will have in the event
dot target dot value. Now we have to pass
the value as well. So we have ID. We can give some tiling
towards this input field, width, sorry, 300 pixel. Now we can have a
couple of breaths here. Let's keep breaths. Now we are going
to have a space, one space component
we are going to use. Because, because we
are going to combine two buttons, Let's keep sides. It will be small. Let's give a liner style. I'm just going to
give overall margin. Add this. We are going to have our button, our Design button. This button will be primary. We can give the button
Lamelech, which you then, once the user give the
ID in the input field, he will be able to
fill that post. Now after that,
what we have to do, we are going to have
one more button. This button basically
responsible for creating a user. This button basically
navigate you to the create for that
we have created here. We have two buttons and we're going to have
an onclick method. We can give you a
finch, use their posts. Let's define this huge AT port. Otherwise we will get error. We have defined this function. This function we're
going to dispatch, Okay? And action. We have defined this
function in which we, in which we are going to
dispatch and actions. So let's first go
into the browser. We have got this input field, and we have to also enable the navigation functionality
to this button. So what we can do
from reactor down, we can bring the
use and navigate. So we need to bring
the US navigate. Now we need to store
the reference off. You use navigate into
and navigate variable. Navigate. What we can do here. On click. We can just simply
navigate to create posts. Let's see details that out
we have registered yet. Yes, this is the same route
that we have mentioned here. Let's go into the browser. Refresh. Click on
Create future posts. So now we are able to
navigate towards create post. Let's type here something. It will accept only the number. We are able to type
that one as well. Now, the next thing
we are going to set up the redact
toolkit in our project.
9. Project 1 - Configuration & Writing GET Action using createAsyncThunk: Here we have already
created the folder. Here we have to create one
more folder like features. Since we are dealing
with the poet now, we are going to give you
life like both slides, not in the root
of reduct folder. We are going to have our
restore dot js file. Make sure it shouldn't
be in the router redact. So I think it's created
instead the future. So let's delete this
one and make sure the file should be inside this reduct for that
is store dot js file. Store dot js file. Now we have in our folder, first we are going to write a redox reaction
with reduct toolkit to fill the post based on the ID using create
a think tank. In posts slice with
Italy slide with nothing but a collection
of reduced that logic. In slides with Italy, we update the state of our component with
the help of producer. So we need to bring
from toolkit, create slice and create Async, create slice, create anything. Now after that, what we have to do with creating a think tank, we're going to make
an API request. So as you know already
read a Tango is included by default
in redact toolkit. Align create a
think-tank to perform a delayed with create
a think tank, we are going to make
an API request. So overall, create a
think tank is used for the asynchronous
logic before sending the process result
to the reducer. So let's create our first action with creating export costs. Post. After this, create a think tank. In the first parameter we're going to pass
our action type. You can pass this way, post and GET post. The second parameter is
the callback function, which is responsible for
making the API required. And the third is optional. It will Container Option object. So here we're going to
write our async logic. We are going to
receive an ID from our components so we can
distracted the idea like this. After this, we can do a return and we're going to use the fish to make an API request. We're going to use
this API first. We're going to get the
port based on the ID. We can just copy this one. We can fit it here. We're going to use back tick because we're going to
get the date on the ID. Here we have two parties ID. Then we are going
to give a response. That response dot JSON. Now, create a think tank, basically what it does. So whenever we dispatch
this action that is concrete pour from
our component. This create a think tank,
regenerative promise lifecycle. The promise lifecycle like pending, fulfilled and rejected. And we will be evaluating these three promise
lifecycle in after reducer, where we can make our desired
changes to the distal. First, let's create a slice. Sport. Cost. Slice is called to create slides. We're going to define
the slice name. So let's give your post. Okay. We're going to have initial
state of our application. So I'm going to define the
post with empathy area. Then we're going to
have loading false. Then error will be null. Okay? For now, this much
initial state is required for our application. Now, we are going to
have our extra reducer, which we're going to handle the three promises
life cycle that is generated by our create
a think tank reducer. And inside this, we
are going to have a good post dot pending pending then
fulfilled and that has acted. Then we're going to
have state action. Here. We are going to have
state dot loading will be true in case of bending, loading will be true. Now, likewise, we are going
to have fulfilled life cycle. So GET post dot fulfilled. State action. Here, we can just do like set state law uploading to false. Now we got the data and we have to make the loading false state. Okay, Now state.org. So now we have to update the initial state
of both tangible so we can just write
like action dot payload. After this we're going to
have it is acted get posted. Elected. State action. In this case also, loading will be the pulse. After this, what do we have
total state dot error. Here, we can give like
action dot payload. Here. Do we have to use semicolon? Semicolon. Don't forget
to use semicolon. Let's format this one. Now, we have to be
actually export this one, export default, post
slides dot reducer. So we have write
our first action. Now it's time to write
the logic in our store dot js file with
the reader toolkit. Configuration of
victorious. Very simple. So we need to bring, configure a store from
our redact toolkit. From redact, totally good
to bring configure if torr. Now, we have to
bring our reducers, reducer. Our future folder. That is four slides. Export, default,
configured a store. Here we are going to
have reducer app. We are going to provide the key for this portrait reducer. With the help of this app key, we are going to accept the
state that we have defined in our slice in order to access this mistake
in our component. That's why I have
defined this app key. We are done with the
configuration of the store. Now let's go to
the index.js file and five minutes to bring one package like
reacted index because, because we are going
to need provided so that I can drag this door to our React application,
tall React redux. And I forgot to install
this package initially. Let us install
packages is tall long. Let's close this terminal. First, pin it to pin it
to bring provider from our reactor products that our component can after the state that we have
defined in our restored. And we need to bring his
tour from our redox folder. Okay, Now we're going to wrap our app
component with provider. Let's cut this one,
paste it here. We can use Datastore
and we can store. You can also check this
one whether you have successfully integrated
redact toolkit with React application or not. You can go to the
browser and you can just open this tool. I'm going to append
to my button. And here you can see the state. So that means we
have successfully configured our toolkit
in a React project.
10. Project 1 - Dispatch GET createAsyncThunk Action: Now we have to basically
dispatch this action which we have
created in our post slides from our component. Okay, let us go to
the index.js file. And from that, we need
to bring huge dispatch and you selected you got to respect is used
to dispatch an action. You selected is used to select
the state from our store. First, let's store
the reference of using dispatch,
dispatch variable. Then only we will able
to dispatch an action. Here. First we are going to check
if you don't have any ID. We have purchased some
simple error method like window dot alert. We can just give myself
like please provide an ID part we are going to disperse and action which we
have created in our post. Post and VS code automatically
import that action. And we can pass here, I did like this because you can see that id we are receiving
here in the form of object. So we can pass the ID this way. After that, we can just do one more thing like
set ID to entertain. First, let's check
whether we are getting poked or not based on random ID. Let me refresh this 1 first. And let's give an ID. Let's click on Fetch forth. Now, let us see the
depth to lower. You can see that promise
got fulfilled here. Okay? Here we have got 1 fourth
in array of object. Now you can see that we
have got this post, okay? Now we have to basically
display this port in our UI. So let's do that one. So now we have to
basically extract the state from our store
using the US selected. You can use your use selector. We can have your lightest did. We can spread out state dot app because our reducer is restored
with the app key. So with the help of app key, we can access the state
that we have in our vector. We have defined a
state like loading. Okay? Post this states we have defined in our
reducer in slides. First, let's console
log the postdoc, whether we are getting the
post or not, console log post. Let's go into the browser. Let's give any random user ID. Now let's open the console. You can see that we
have got one area. It will be always containing
a single array of object because we are fetching
the post based on the ID. Now we're going to display this post detail in
a card component. So first, I'm going to put some code here
in loading curve. Okay, So we are basically
showing character loader. Loading is true. Once loading it fall, then we are going to show that
data in a card component. And I'm going to pay code
here for skeletal loader. And don't worry, I will attach
this code in this lecture. You can easily find out that code for this
floating curve. Now what we have to do, we have the loading state. After this is page I'm going
to give a couple of brief. Then we can have
our loading state. And if loading is true, then in that case
I'm going to show the character loader
loading card. Cvs put automatically
import that component. We can provide the count to one. And in this part we
are going to show the port detail in
a card component. Here, I'm going to use fragment. And we're going to use
one class name that is, and design class name, card, border hyphen wrapper. And after this,
what we have to do, I'm going to use card here. Car, type in a title. We can sort a title
like this way. It will be always containing
a single array of objects. So we can display like
this for dot title. This way we can show. We can teach better user
ID as real user ID. User ID and post post dot ID. Okay, Let's first check this one whether we are able
to see anything or not. Let's go into the browser. And now you can see that we
are able to see that id. Reframe this one. We
are getting some error. Cannot read property of title. Okay, no problem. So to fix this issue,
what we can do, we can just check here like
dot length. Dot length. This is greater than 0. Then only we are going to
display this card component. Let us cut out this one. Here. Let's go into the browser,
refresh this one. Now, let us give
a random user ID. Now you can see that we
have got our post here. This is the title
and this is the ID. Now we have to show
the body as well. So you can see that it does have a title which we
are already displaying here and we have to display the body as well and
this card component. So what we can do, so you can have
one span tag here. Span tag here. We can boast 0 dot body because we are facing the
single post based on the idea. So it will be always having
a single area off object. I hope you are
getting this point. Now let's go into the browser. Now you can see that
we are able to display the body as well. For this post. We are able to display this one. We are able to display
the title and body. And let's hit again
based on some any ID. We have collected
loader as well.
11. Project 1 - Adding Buttons: Now we have to add two
buttons that you do. Tap, Delete. Let's add those button as well. After this card, we are
going to that button. So I'm going to use your space. We can provide some
props like middle. I'm going to have
some inline styling. Margin top, I'm going
to give you a margin, top 35, margin left. That is five. And I'm going to give float, float, float right. Now. Between the space, we are
going to have our button. Button. Again, we're going to use
and design component. We can have your
alignment tiling. We have to specify pointer. We're going to have type, type. I'm going to give you a primary. We are going to have Danger. We will have onClick method
as well so far now Judge, define the value out button
so it will have a delete. The same thing I'm just going
to copy for a date as well. It will be just a date only. We can remove this danger part. Let us see whether we are able
to see our buttons or not. You can see that we've
got our buttons. Let's page again post. We have got our button. It is working.
12. Project 1 - DELETE with createAsyncThunk: The next operation
we are going to perform the delete operation. So we can delete this port which we have paid based on the ID. So first we have to write our action in our post
slash dot js file. Let's do that 1 first. In ports like dot js file, I'm going to have
one more action. Let us delete posts. I'm just going to copy this one. I'm just going to paste it here. And I'm just going
to change this one. So it will be delete posts and this will be x and
titled with the delete post. Again, we are going to delete
the post based on the ID. Here we are going to
defeat the id from our component and the
URL will be additive. Additionally, we have to provide method here because we
are using fetch here. We have to provide
a method here. Like delete. So far getting the data from
JSON server or any API, you don't have to
provide method. But in case of other requests
like both delete or update, you have to provide
the method here. So here we are providing
the method, delete. This will be additive thing. Now we are making
with API requests. So this creates a think tank, generate three lifecycle
which we are going to dissolve in our reducer. Again, what do we have to do? So I'm just going to copy this three life cycle that is spending full
build and directed. And I'm going to paste it
over here and make sure to change this one from
guidebook to delete posts. And we can remove this one. It will be jet
action dot payload. So let's use this action that we have created here
in our components. So let's go to the
index.js file. In onclick. We can disperse that action so that
it can delete the record. Here. I'm going to display
that action. So dispatch and delete posts. So VS code automatically
import that action for me. And we can disperse
that like this way. So we are going to display the same ID that we're
using to fill the ID. Okay? Before. We can have ID here, like this index of array dot ID, Let's see whether we are able
to delete this port or not. For this one, let's create a
post based on the five ID. We have got this post. Now let's click on Delete. Now you can see that
we're successfully able to delete the port
as well based on the same atom that we
have used for fetching the delete operation is also done with our reduct toolkit
in this application.
13. Project 1 - POST action with createAsyncThunk: Now the next
operation we're going to perform the create user pool. Once you click on this, create a user for you, we'll navigate towards
the Create Board. And whatever the port
you are going to create is not going to save in dB because we are using
JSON placeholder fake API. So it doesn't maintain any kind of database
behind the scene. So you won't be able to
save this pork in dB. But we are going to mimic this port request with
the help of this API. Okay? We are going to create that action in our first
slide dot js file. What I'm going to do, I'm
going to copy this one. I'm going to paste it here. Create a better grade post. Now we have to make
some changes here. This time we are
creating the pore so it won't accept
any kind of ID. We can remove this part. After this. What
do we have to do? Method? We are going
to provide both method yet because we are
creating a new port. And after that we have to
provide the header as well. Otherwise it won't work. So I stepped headers, we have to provide a theft. We can give your
application JSON. Then we are predefined
the content type, content type application. Json. We're going to have body, JSON, stringify. We're going to create
the pore with title and body title we can give here. We're going to receive a values. We are going to receive a
values from our components. So we can dig treated
this value like this way. We can have like
Values, dot title. We can have like body
Values dot body. The requisite thing
will additives. We have created this
port and don't worry, I will explain this
part. The values part. Here, value is nothing
but it will contain an object with a title
and body information. And that's receiving values from our component and we are
providing title and body. But we are going
to have to fill in our create for that
is title and body. Let's say this all the
three promise life at that is generated by our
creator, I think tongue. So again, I'm just
going to copy paste the S3 lifecycle. We
can paint it here. And don't forget to change this one from
gradebook to create both. Let's copy this one,
let Pe two tier. And the rest of the
thing will be additive. We are done with
the actual part.
14. Project 1 - Working on Create Post Form: So let's work on this. Create both from
our anti design. We need to bring some component. The component we are
going to need here, input, button, card, space. We're also going to
need you selected and you'll be spared
from our React. So huge selector. When IT to bring and use
dispatch from react, we need huge state as well. I'm going to define
one state with values. The same value that we
are going to pass through our action so that it can receive here in our
slide dot js file. Let's work on this Create port. Huge state. And we're going to define our initial
state with an object. We are going to have
title and body. And after that we are going
to have a mortgage state. So this is paired with ugly. We are using to describe
two discrete created. Once user creates a poor, then on the same page we're
going to display that created a huge state and initially
it will be the false. After that, let us store
the reference of us. It is paginate
dispatch variable. Usually dispatch. First we are going to work
on off form component. So we are going
to create a form. Let's remove this one. We're going to have a form. Let us remove action part. And here we are going to
have on Submit method, which we are going to
define handle submit. The form we're going to have. After this. We are going to define
our input field. Gave you a placeholder. Title. Type, text only change. We're going to give you. I can give you like set values. I can spread out the values
and we have to just only, and we can set the title
to target dot value. Now, we are going
to have values. The values, values. So from values we can take
texture like title and body. In the value we can
pass the title. Let us give some inline styling as well to this input field. So I'm going to give 400 pixel. After this, I'm going to
have upper lobe point. Then we are going
to have text area. So input dot text area. After this. And opposite, I'm going
to copy this thing. I'm going to paste it here. Here it will be body. It will be attached
and this will, and it will become body. Body value will be body
width will be additive. Or we have to give because
it is a text area, so it will be large. Now I'm going to have a
couple of break again. In this space. I'm going to create
a one button here. Style. Let's give it a style. Margin. Ten. We're going to add button. I'm going to use NTDs N
button component, onclick. We are going to have
onClick method. The value of button
will be the goal back. We will define onclick method. Let us go back.
Basically you will navigate back to
the homepage only. Going to have on Submit button. Submit types. We can give primary
HTML type summit. Let's go into the browser. We have some error, so we need to defer it, handle submit. So for now let's just
create an empty function. It will receive an event. Let's go into the browser. So we have got this two-input. One is a normal input fail and other text area we have go back and submit button and
if you click on go back, you will never get
towards the homepage. From React router dom. Bring US navigate. We're going to use
navigate here. Use navigate. And what we have to do. We are recording the reference
of us navigate in and navigate variable
and an onclick. We can navigate. We can give you navigate. We wanted to navigate
towards the homepage. Let's first try this one. This one, Let's click on GoBear. But now we are able to
navigate towards the homepage.
15. Project 1 - Dispatch POST createAsyncThunk action: So now we have to basically
work on the create posts. So we're going to
display an action that we have created in our
posts like dot js file, handle submit, we are going
to despair that action. Now, what we have to do handle some material
receiving an event so far, we have to do a dot
prevent default to prevent the default
behavior of browser. And after that, we can
display that an action. The action we have like
create post Soviet code, automatically import
that I sent for me. And we can just pass
the entire values. This value, particularly we
are diff structuring here. You can see that in our
create posts action, when create both tax
and we are transferring the value which we are
sending through our action. After this, I wanted to
inputted the input field. What we can do here, title. So title will be in Putty,
will be the impetus. We have to also do set. So both true. The moment you submit this form, I wanted to show the port on the same page below this form component I
wanted to created post. Okay, so that's why I have
a separate state like set. And it will become true. We can check this one, whether this create
posters working or not. So we can verify with the
help of reduct Deadpool. First, let's go into
the browser and let's give you a live test. And I'm going to paste some text here inside
this text area. I have pictured my text here. You can see that Let's
click on Submit. Let's open the
reduction depth Told. You can see that. You can see that our promise
got fulfilled here. And we can see that
we have been poked. You can see there we
have got our title body. You will also see a UserID ethically generate
a random user ID. You can see that we have
got one, adding one, not the random ID, which is created by
our JSON server. Now what we have to
do so we're going to display the created portrait
below this form component. Once the user
submitted the form. Let's go to the VS code. I'm going to use a
huge selector here. You selected I'm going to
use to basically track the state value from
our store state. Okay? We can have a value like to
post and loading. After this. We have to do after this, we are going to have a function
which is responsible for sewing created blocks
or so post blog. Inside this we are
going to have return. We are going to use
fragment here also. I'm going to use loading. Loading if true, then I'm
going to display or loading card component that is responsible for sewing
that character loader. And I'm going to
provide a count here, one else, I'm going
to block both Tokyo. Again. What I'm going to do, so
I'm going in index.js file. And I'm just going
to copy this thing. Let's come here. And let's paste it here. We might have to change. Let's give you a
closing div first. This will be the test,
the Silvia additive. This will be edited. So
everything will be edited. Because once you create this for the posts state will contain a single
array of object. We can sort this created port
below this form component. I'm going to have a
couple of break again. And we can have both. True. Then I'm going to that post to post blog. Let's save this one. Let's go to the browser. Refresh this one. Let's test blog. And I'm going to pick
the content here. I have pictured the
content of body here. Let's click on Submit. You can see that we're
successfully able to create a port and we're displaying
below our form component. We have performed this create
operation with the help of reader toolkit in
our React application. The next operation
we are going to perform the update operation.
16. Project 1 - PUT action with createAsyncThunk: So create operation
is done with toolkit. Now it's time to perform the update operation with
the help of radar toolkit. So first we're going to create an action which will
be the responsible of updating the both based on the ID in the ports
like dot js file, we're going to create an action. So what I'm going to do, I'm just going to copy
the entire action. Just going to paste
it over here. This will become update. Both will become update board. Now we're going to
update the port based on the ID from our component. We are going to receive
couple of things like ID. We're going to update the body. We're also going to
pass the title, okay? But we will update only the body part of
the single blog post. Here we have to specify the ID because we are going to update
the port based on the id. And the method will become put. The header will be a stay
as it is in the body. We have to inject
her, remove this one. We can just pass additives
like title and body director, the thing will be additive. Now. Now this creates a think tank, will generate a three
promise life cycle. So let's handle the
three promise lifecycle again in our reducer. So I'm just going to copy the three life
naturally over here. And I'm just going to paint it. And make sure to update
from gradebook to update. It will be update board. This will be also update both known to change this
whole thing here. And we have to
define some estate, some additional initial
state we have to define. We're going to update only
the body part of the body will be initially empathy and
there will be an edit mode. So initially it
will be the false. We are also going to
have an extra action. So I'm going to define
that action in reducer. So this accident was responsible for enabling the edit mode. We are going to have like set. This will having
state and action. Here. We're going to have
a state dotted it is equal to actual payload. We are going to receive this
thing from our component. We have to do one more
update like state dot, body, dot, payload and body. We are going to receive
two things like edit mode and body part of
the single block board. Let's export this
action as well. What we can do here, we can have like export const, boast, slice, dot, action. And we can give
here like set edit. Okay. Now let's go
back to the UI part. Let's go back here. Let's fetch one post here. Now we have an edit
button over here. And once you click on this, you did this body part with Italy converted
into the text area. And the button value
will also get Change. Button value, good.
Edit to save.
17. Project 1 - Populate Post Data on Form: So an index.js file. What we have to do first, we're going to receive this new state which we
have just defined in our posts like dot
js file object, extracting those listed
above US selector. And here what we have to do. Now, we're going
to have our mode. We are in edit mode. Then what we have to do, we are going to
have fragment here. An else part. We are just showing this body part that went you that it's
not editing the post. Now all the logic we
have to define in this fragment part,
editing the post. So what I'm going to do, so from this, we are
going to have onClick. We're going to
dispatch one action. Dispatch. And we're going to
displace said idiot. Okay? Once the user click
on this edit button, mode will become true, so true. And we have to pass
the body as well. Valuable body. So we can get the body
light posts 0 dot body. Let's format this one. Let's save the file. Now here, what we have to do, so it will be in bracket. So let's give you a bracket. Here. We're going
to have text area, text area rows for going to have values. Okay? So we need to define
the initial state. We have to define a state
for this body values. So here what we can do, we can have one more
state like body tag. Because we are updating the
body of the single blog post. We're not debating
the title set. It will be in pity. And
here I'm going to run one huge effect. Use effect. Let's use Effect run once we
have the value in our body. I'm talking about this body which we have
defined in our posts ly dot js file.
We have the body. Then body. This way we will
able to populate the value of body in
a text area here, what we'll have body, okay. We are going to have onchange. It will have an event set, body text, dot,
target, dot, value. Then we are going to
have two buttons. Button name will be
like save and cancel. Per user have option to save the post and it can also
cancel the update process. So we are going to have to
button with seven cancel. I'm going to use your space. Let's add that we are
going to have size model. Okay? I'm going to have
some tiling margin, top five margin left. I'm going to give
margin left five. Between this space, we are
going to have our two buttons. Button type, primary. We are going to
have a table, okay? Are going to have another
button that will be the cancer. If you click on the cancel, you will basically come
out from the Edit Mode. If you click the Cancel button, it will be just normal button. First, you can check this one whether we are able to populate the body value of blog in a text area or not on
clicking the Edit button. Let's refresh this one. Let's face the post
with ID three. Let's click on edit. So we are able to publish the body value of
blogging a text area. This thing, we don't want that. Okay, let's go to the VS Code. What we can do over here. So we can check here
like this entire space. We can check here
like if you are in, if you're not in edit mode. So in that case, only we wanted to this
edit and delete button. Let's cut this one. Let's go into the browser. Differentiate. Let's fill out the post. Now we have got
these two buttons. And once you click
on the Edit button, that went, now you
are in edit mode. Then that case I don't want it to display those two buttons. Once the user either
click on save or cancel, then these two button will
get display over here.
18. Project 1 - Dispatch PUT createAsyncThunk action to Update: So far, we are going to
have onClick method. Here. We're going to
dispatch it to action. With ugly is used for updating the single block port
with body value. Okay? So here we are going to dispatch an action that
we have created in our post slash dot js file. So we have to pass like ID, post ID. We're also going
to send the title, the same title we
are going to send because we're not
editing the title. We are updating only the
body value of blog and body. We are going to send
body temperature. This value we are only changing. If you click on the title. So we have to basically
stop the update process. So overall here will come
out from the edit mode. So in that case also, we have to dispatch an action. We are going to have
onClick method here again. We are going to
dispatch, dispatch. In that case, it
will be the false. Here also, we have to
dispatch one more action. Dispatch edit. Once you click on the edit, we wanted to basically come
out from the Edit Mode. So we have to also
dispatch the year to date in GitHub updating the body
value of single blog post. Here we are going to again
path the edit false. Okay? And after this, we have to basically make
this body to imitate. Here also, we can pass
the body to infinity. Here we are getting some. So it will be comma. So let's save this file. And let's go into the browser. Refresh this one. We're going to
start from scratch. Let's face the blog. Wait on the ID five. Now, let's click on Edit. Now we're in edit mode. And if it gave test, we are not able to
update the value. So typing is not working here. Let me see what is happening. In on change. What we have to do. So something is going
wrong here, I guess. So here we have to
basically show the body. Body. Let us go into the browser and fetch the board based
on the user id five. Let's click on it, it. Now we are in edit mode. Now, let's update this
body value of Blackboard. Let's give you a
live blog updated. If you click on Save. We have got the updated body
value of blog here you can see that we've got body
like blog updated. We have to faithfully perform the update operation
as well with the reduct to liquid and whatever the update
you are doing here, it won't save in dB because JSON placeholder
doesn't maintain any kind of database
behind the scene. If you rephrase and face the poet again with
the same ID like four, you will get the old body
value of this blog post.
19. Project 2 Cocktail App - Demo: Welcome to this section. In this particular section, we are going to build
our application with the help of redact Toolkit
using create tasting. That is cocktail application, where we're going to
let all the cocktail by making third-party API request using create tasting thing. So we're going to sell all the
cocktails in our homepage. As you can see that
this third party API return around more
than 20 cocktails. You can, you can see
that on homepage. You can also view the
single cocktail in order to read more information about
that particular cocktail. So if you click on this, there are details button. You will navigate towards a
single cocktail page where you can get the more detail
about this is basic cocktail. And if you click on Google, you will get back
to the homepage. Now you can also set it
to a specific cocktail. So I'm going to give you
a keyword like Adam. You can see that with
the atom keyword, it's written for cocktail. We have also implemented this
searching functionality in our cocktail application
with redact tool kit only. Overall, this application we're going to build in this section, which the reader Toolkit using create a
symptom middleware. And before we start
building this application, we will understand
little bit about create a think tank middleware and that we will understand
in next video. I will see you in the next
video where we're going to discuss about just
create a middleware. Then we will start
building this application.
20. Project 2 Cocktail App - Set-up: Now I'm in this directory and I'm going to open
a command prompt here. So let's open one
command prompt. And I'm going to create a
project with the command and px Create React app
and the project name. The project name will
be toolkit cocktail. So I'm going to give this project name and
I will hit Enter. So I think I have used the NPM. So it will be n p x naught NPM. So let's change this one
and let's hit Enter. And it will take around two to 3 min to install all the
unnecessary dependency. And I'll be back once all the
dependency got installed. So it looks like our project
setup is now completed. So first let's go
into this directory that is toolkit cocktail. So let's go into this directory. And guys, we need to
install some dependencies. Before I do npm start, let's install those packages. The packages we're going to
work like React router, dom. We need React router to
build this application. React redux. The most important thing
is redox toolkit. Okay? Redux, last toolkit. Can you guys only
this much is required to build this application with
the help of redex toolkit. Let's wait for this package
installation and I'll be back once all the
packet got installed. Guys, are all packets
got installed. Now, I will do and pay me start this project I have already opened in
the Visual Studio code. So let's go back to the
Visual Studio Code. And now you can see that our project compiled
successfully. So let's go into the browser. You can see that we
don't have any issue. And let's hit up the material design book club
as well in our application. So we're going to
use this tile set. So what I will do, so
what you have to do, you have to just go to this link and you have
to just copy this part. We're going to use
this style setup, the material design
Bootstrap five. But this application, and let's go into the
Visual Studio code. So I have copied
this style sheet. And in public index.html, we have to just paste it here. Okay? So we are done with this heritable material
than Bootstrap.
21. Project 2 Cocktail App - Header: So now we're going to start working on the header component. So inherit dot js file
what we're going to do. So it will have a
very basic contained in the header dot js file. So we're using the hashtag state of the material to
the n booster five. So we're going to
use the class name. So the class name with
light, navbar, light. Then be the light. And this will be fixed. Top. Okay? So this class now
we're going to use, then we are going
to have another div with the class of
container fluid. Then inside that we are going
to have the ban keyword. And we're going to
have another platinum that the class name
will be light. They span tag and the class
name will be navbar, brand. And margin bottom zero to one, t1, then header, title,
then text boxes. Okay? So this will be the
class name for a span tag. And we can give your life, find your favorite cocktail. Okay? So this is the very basic content
that we have in our hero dot js file. Okay? And this one, and this one will be
the nav, okay? Not do. Let's make chain this one. So we are done with
this header component. So this must only
content required for the header dot js file. And I'm going to
paint this hazy good in the index dot CSS file. I'm going to pay to CSS code
for this index dot CSS file. And let's go into the app.js. App.js five-minute to bring the header component VS code automatically for this
header component. And let's go into the
browser and verify whether this header
component is working or not. You can see that we have
got this nice header. Find your favorite cocktail.
22. Project 2 Cocktail App - Configure Redux-Toolkit: Now we're going to work on
the displaying the cocktail. So first, we're going to set up the reader toolkit
in our application. So guys, let's set up the redact tool kit
in our application. So instead of voltage, we are going to
have another folder that is called features. Okay? And in theory, the
redux in this, we are going to have one
file that is store dot js. And in third is feature. We're going to have
the file cocktail fly. Okay? Since we're working with the cocktail in
this application, the file name will be
like cocktail slice. Okay, so in the cocktail slides, we're going to make all
the asynchronous request and we will update the store. Okay, so first, we need to bring create slides and create a think tank from
the redux toolkit. Okay, let's bring
those things first. We need to bring create
slides and create anything. So in greater toolkit, readers can get
included by default, and which allow them
to perform delete asynchronous logic before
sending the process, the desert to the reducer. For particularly
irritating concrete, they're responsible for
performing asynchronous task. So that's why we
are going to do to create async them to perform the asynchronous tasks
and create slides. Basically a function that
accepts and initially take an object of reducer
function and it's lightning. And then it automatically
generate an action, created an accent that corresponding to the
reducer and it stayed. So with the help
of retest toolkit, you don't have to basically
create a separate action, action file action type reducer. So everything will
be automatically generated with the
help of slides. And let's write all
the asynchronous logic with the help of reader toolkit. Specifically, we're
going to fetch all the cocktail list and
display on the homepage. So let's write like
export cost tells. Ok. So basically it
will be responsible for fixing all the cocktails. With the help of API, we are going to use the
credit rating done. And basically this will accept the three parameter
that is an accent type, which will be the string,
a callback function. And then optional that
is an object, okay? So this will be, the
third parameter, will be the object and
which isn't optional. Okay? So let's define it at ten type, which will be the string. So since we are dealing
with the cocktail, so let's define like cocktails. And this will be like pitch. Pitch cocktails, okay? Which cocktails? And the second parameter
we're going to have light callback function. Okay? So this callback
function basically will make the API request. Okay? We are going to
be huge, I think here. And for making the API request, we are going to use
the phage only. Return h. We're going
to paste the API here. I'm just going to paste
the API in this phage. So I'm just going to
paste the API here. So this APA we are going to use are getting
all the cocktail. So basically this API
returned 25 cocktails, okay? Around 25% return. So you can see that it return around 25 cocktail
in my Postman. So let's go into the Visual Studio Code and when the promise is resolved after making
the API requests. So we are going to handle
into the den method. We will get the response. And this will be
just respond, Jason. Okay? Guys, parameter in the create is in thank isn't
is an option and we are done with the first
action that is responsible for fetching all the
cocktails from this APA. So now this creates a think
tank with Italy generated three promised life
cycle that is pending, fulfilled, and reflected
this life cycle we're going to handle
in the extra reducer. So basically extra reducer handle the asynchronous request. Okay? We're going to handle all these three
lifecycle that is spending fulfilled and rejected. We're going to handle
in the extra reducer, which will be the responsible for handling the
asynchronous request. So we are going to use the create slides
for that purpose only. So now what we can do here,
const cocktail slide. And we're going to use
yet create slides. So this will basically
acceptance, flies name, so slight name you can give it like cocktail only, cocktails. And the second thing it will
attempt the initial state. So you have to defend initially, initially straight
up our application will be like cocktails, the syllabus and in PTA. And we're also going to
have a single cocktail. Also will be the only
loading we're going to use. So this will be the false
initially and error also we're going to use
this will be the null. So we have defined
the initial rate. The third thing we
are going to define that is that extra reducer. Reducer, we're going to handle the three promised life
cycle that is generated by creating a think tank that is pending, fulfilled,
and rejected. So we're going to use your leg, which cocktails and painting. And after that, we're going
to have a state action. And this will be like state
not loading for to rule. Okay? So painting means our
data is on the way. We haven't received the data. So at UAB, we haven't
received the data. So meanwhile, we will display
some kind of a spinner. So that's why I'm using
yellow loading. Okay. And it got fulfilled. So fh.com, so phage
cocktail lot fulfilled. And it's going to have
the state, state action. And now what we're going to
do state and dot cocktails. And we can use here light
action, not payload. So this will be light accent
dot payload and drinks. So why we are using like x
n dot payload dot drink. If you go back to the Pokemon, you can see that we have
to target the drinks here, okay, then you will
get all this cocktail. So that's why we are using here x n dot payload dot drinks. I hope you get the point now. And if theta1 dot
loading will be also false once we have received
the data at our UI. And let's also
define the rejected. You have to also
give the comma here. Otherwise, you will get this header and this
will be the rejected. Okay? In that case, you can just
have the action dot payload. And this will be
the state error. Okay? Now we have
to export this one. So let's export default, cocktail slice dot reducer. Now, we're going to
basically configured the store with 3D toolkit is very easy to
configure the store. Only just two to three
line of code required to configure this tour with
the elbow predict toolkit. We need to bring the configuration
from the desk toolkit. So configured restore. And let's import
cocktail reducer. Reducer problem. Featured. Cocktail flies, okay. And let's export default. Provided store. And we can attain the key value to our
reducers already said. And in fact that we are
going to define the key. So I'm going to define the app and tender
cocktail producer. With the help of app key, we're going to the state, whatever we have in our store. So whatever the state we have defined here in our
cocktail slide, we're going to access all this, the state from a store
using the key value. Okay? Now we have to do some smaller detachment
in our index.js file. So first, we need
to bring the store. Also, we need to
bring the provided, provided from React redux. So let's bring the
provided from React redux. So from reactor you
ducks, we need provider. And what we can do here, provider, and let's
cut out all this part. And let's just paste it here. And we're going to define the store and just
find the store. They say basically our React
application can access them, is cleared that we have
defined in our content slice. Okay, guys, now we
have configured the redact tool kits that it's
fully in our application. And you can also verify this
one in the browser as well. So let's go to the browser, refresh, and let's
open the dev tool. So you can see the date here. This is the initial state
of our application. So we have cocktails
with the input t at a cocktail party or a
loading fault error. This is the same initially
that we have defined in our, that we have defined in our
cocktail slide dot js file, that we have
successfully configured the redact toolkit
in our application.
23. Project 2 Cocktail App - Search Component: So guys, the next
thing we are going to work on the
search input field. So let's go into the
Visual Studio code. So we'll create one file here. You can put in jail. And we're also going
to have a CSS file. But the third input as well. Okay? And let's generate
some snippet here first. And after that, we are
going to have some hooks. So we're going to need this hook in our
search input file. So we're going to
use a user of here. And after that, we
also need to bring the CSS file for
this search input. So let's bring that on as well. That's input dot CSS. And I'm going to
pay the CSS code for this hurricane
put dot CSS file. So guys, I have just picked to the CSS code for this
search input dot CSS file. You can copy all this here, test score if you wanted. Okay, by pausing this video,
I hope you have a copy. I'll just hit Export. And let's go into this
hydrogen put dot js file. And here, what we
can do in return, we are not going to
use the div tag. And you're going to have
the class name here. The class name will
be the section. That's okay. Then we're going to have another class
name with the form. So we are going to be the form tag and the class
name will be the fairest form. We don't need action, verb form. And inform where we're
going to have one day. The class name, form control. Okay? And in fact that we are
going to have a label. So let's move with the name. We can give you,
like that cocktail. Okay? And we're going
to have input here one. So this input, we're
going to have the type. So type will be the
text-only name. We can give name only. You can give ID here. They will be the name only. And let's use the, use
the rep here as well. So const value, use there. And we're going to
use here, okay? Tradeoff value. So searching
value, you can give here. And the rest of the
logic we will write later on once we have left
on all the cocktail list. Okay? So the rate
of the logic for this search input file we
will write later, okay? Once you have display all the cocktail date on the homepage. So what we can do
here as of now, so go to the index.js file, ingestion, bring the search
input component, okay? And let's remove this one. We don't need this one. And let's go into the browser. And let's just go
to the homepage. Now. So now you can see
that we have got this search input field and we will write the
logic later once we, once we display all
the cocktail list on this homepage, okay.
24. Project 2 Cocktail App - Show Cocktails using Actions: The next thing we
will be working on lifting all the cocktail
lift in our home page. So we're going to define
the component here. So let's define one component here to display all the
cocktail left in our homepage. The component name will
be like list dot js. And let's generate
this snippet first. From react, we need some hooks like UC state and use effect. And from reactor did that fall? So we need you selected
and used in dispatch. You've selected and use
dispatch from reactivated. So let's bring those
things as well. Used selector. And you're also going
to need that axon. That is phage cocktails. From our cocktail slice. We need to go back to
the redact folder, then features folder, then
come, then cocktail slice. And we have to bring
the phage cocktails. And we're also going to use the link from React router down. Let's bring the link as well. React router dom. And first, what we're
going to do, first, we're going to extract
the state from our store with the help of
you selected. You selected. We can use yet for extracting dictate that we have
defined in our code. We can do something like this. Did not, because our cocktail to do so it is registered with the app key. If you go back to the
store dot js file. Okay, so with the
help of this app key, we can extract the state that we have defined our
cocktail slides. So we can activate the state, so we can extract
all these state that we have defined
in our cocktails. Cocktail slides with the elbow have in our cocktail
dish dot js file. For lifting the cocktail. We're going to need cocktails. Okay? And we're also going
to need loading. And we have to define
when one state yet. So that will be like
modified cocktail. Okay? So set modified cocktail. This will be the input D. And let's also store the reference of huge dispatch Intuit
dispatch variable. Because we're going
to also need to dispatch this phage
cocktails axon. And we're going to dispatch in this stage block
inside are huge. So we are going to
use Hughes effect here. This will be the input t. That means we're going to display it on the initial
load of application. Whenever user load application, we are going to dispatch
this edge cocktails, okay? And we can also verify this one whether
it's working or not. So let's just gave you a reading light
cocktail list. Okay. So we have to bring
this cocktail list here as well in our Pages folder. Okay, so index.js, we need
to bring the cocktail list. So you guys could automatically import that component for me. And let's go to the browser. And now you can see that we
have got all the cocktails. So we have around 25 cocktails. You can see that we have
bought all the cocktails. So let's go back to the
Visual Studio Code. And now what we have to do, first, we need to write
one more use effect. Because we are going to
change some names here. So you can see that we
have some weird name here. Drink ID, we have
ID, drink, guys. A couple of object property. We're going to rename. Okay. So let's do that as well. So we're going to have
one more users that, and that's why I have defined here modified
cocktail state here. This user to only run once we have the cocktail hour to store. This huge effect
will also run if this cocktails had a
good change. Okay? So we can check here, but if we have the cocktails, then we can have
like new cocktails. And we can just map the cocktails because it is an array of objects
will get can use here. So we can use the map function. And from item we're going to detector
some of the property. The property light, tidy drink. Okay. So I did drink. We can do texture,
then STR drink, then FTR drink, Tom, then a TR. So I'll just go and
copy the thing. So this one here. Okay? And STR class. This is the last
property that we need. And after that, we're
going to rename this property because this is
looking a little bit weird. Okay? So this will be
light added ring name. We can have like
FTR drink image. So this will be like STR, drink, come in pull. This will be the STR alcoholic. And I'm glad this will
be STR and glass. You can see that these
all names are we at. So that's why, that's why I have rename all this property. So we can use like id
name image1 for glass. Then we can state the modified cocktail to
the new cocktails. Okay. So inside else, if we
don't have cocktail then that the modified
proctor to infinity. Okay? And let's also use
the loading as well. So if you have the loading, that means our data
is on the way. We haven't received
those data RTI till now. Till that time, we can
display the loading. Okay, so some kind of a
spinner we can display return. We can have here live with
the div class name painter. I can grow. Okay. This will be having the role. Here we are using basically Material Design
bootstrap file, okay? And we can have a span tag with the class name
visually hidden. Okay? And we can have here like loading and inside the return. And we can remove this one. This is going to having
a container lastName. Then we're going to have
another class name. So we are going to use material today after class name here. So row, I can call columns. I append one, then row calls md hyphen three, then G hyphen four. And we can use here this
modified cocktails. You can use your map. Okay? We can just capture all this property
that we have rename yet id, name, image and
Fogler from item. So item and we can
just take a picture id, name, image, glass. And then we can have
one return here. And this inside return, this will having a class
name with the column. Okay. And we have to provide the key. So he will be the ID. And then we're going to have
the platinum with the car. So car edge happen to tie that. We're going to have
in the image with the class name card,
hyphen IMG top. Okay? And we're going
to define the source. So we have already
the structure, the image from the item, and we can have the name. Okay? And after that, we're going to have the div with the class name card body. Okay? And we're gonna using
the Atlantic tiling, so distributed text
align left, okay. And inside the div, we're going to have
the h5 tag with the class name,
card title, okay. And this title is going
to having them name. Okay? And we're going to just
copy again one more time. And this will be
the edge fertile. And this will be the glass. And we're going to
having one p tag with the class name card text, okay? And in fact that we are going
to have in the info, okay? And after that, we're going
to have one detail button. We're going to use link. And we're gonna having a button, button with the class name btn. Btn in four, okay? And this will having a details. And this will basically navigate towards the
single cocktail page. If you're usually interested
to see the detail about that particular cocktail that routed already registered
in our app.js file. So we have pediatric
specific either route here, so we have already
rejected this route. You can see that in our
app.js file, cocktail, okay? And we have to specify the ID. So this is a cocktail list. We can give your ID. Okay. I think we are done. Okay. And we can verify this one whether
it's working or not. So let's go into the browser. So now you can see
there we're able to display all the cocktail
that in our Homepage. Okay. So this is working fine.
25. Project 2 Cocktail App - Action to Fetch Cocktail: The next feature we're
going to work on the displaying a single cocktail
lift on the cocktail route. So once the user click on
the detail, so it will, so all the details about
that particular cocktail. So this thing we're going to let us go back to
the Visual Studio code. So in order to display the information about
the single cocktail, we have to work on this file. Okay? So before
working on this file, so first we have to work
on the cocktail slice. So here first we need
to write the action. What do we can do here? So I'm just going to
copy paste this one. Because only this thing, we're going to need to
change this APA part, okay? I'm just going to paste the
API that is required here. So the TPA we're going to use perfecting the single
cocktail based on the ID. First, rename all
this thing, okay? This will be the first
single cocktail, and let's rename the
same type as well. We are going to receive
this id from our component, so less than this detector, the ideal light in this way. And we have to define the three promised life cycle
for this Ax and Ay as well. So I'm going to just copy this entire stuff
and just paste it here. And we have to rename this one. So this will be the
phage single cocktail. And in that case also you have to target their drinks, okay. And don't forget to
change this one. So this time we are dealing
with a single cocktail, okay? So this area will only hold
a single object because this will be the response
PER for displaying the single cocktail information. Okay? So again, you have to target the accent dot
payload dot drinks. Okay. So we're done with the
logic in our context, slight or GAS for fetching
the single cocktail.
26. Project 2 Cocktail App - Cocktail Detail Page: So let's go into this single
cocktail dot js file. In this file first
we need to bring some hook again,
like you restate. Use effect, okay? And we also want to need
link from React router down. And we're also going
to need to use better use perm
because we're going, we're going to need the ID. So once the user
click on details, so if you click on detail, so you can see that we
need this ID, okay? So this hardy we can get with
the help of, UH, parents. And we also need
that action that we have just created in
our cocktail slides. So we have to go to
the redux folder, ten features, then
cocktail slice. And we can bring that
edge single cocktail. And we're going to also need used selector and use
dispatch from React redux. So from React redux, we need use the
electoral, use dispatch. Dispatch and you selected. And again, I need the cocktail and the load in part from our restore with the
elbow, we used selector. So state. And with the help of
theta dot AB key, we can extract the cocktail
and the loading state value. And again, we have to
define this thing again. So I'm just going to copy this, this part and just
paste it here. Because again, we need to rename the existing property of the cocktail because those
named Luke, little bit weird. So we have to rename some of the existing property
of this cocktail. So you can see that we
have this all we are now. We will just rename hum, of the existing property of this cocktail that we're going to have again,
this modified cocktail. Okay? And we have stored
the reference of Eurydice pet into a
dispatch variable. And after that, we have to dispel this
page single cocktail. Okay? So this huge effect already is, and once we have
the ID, so far ID, what we can do, we can detect that the id
with the help of use. So whatever the idea
we have in a URL, we can detect where the id
with the help of huge pattern and this huge pet only
run once we have the ID. So we can dispatch
a single cocktail and we can just
provide the ID, okay? And you can see that
idea is getting big texture here in our first
single cocktail action. So let's go back to the
single cocktail dot js file. And again, we have to
write one more use effect. This huge effect will only
run when we have the ID. And then, okay, and here again we're going to
check the cocktail length. Okay? So if you have some value, that means we are going to
take the cocktail length. And if it's greater than zero, and that means we
have the cocktail, cocktail in our area object. And after that, we're
going to ditch structure. Some of the thing. We are going to dictate how up the
property from this cocktail, this cocktail area
with Italy hold the single area of object
with, because this, because this cocktail error
will be only responsible for displaying the single
cocktail information. So this will only hold
a single area object. So this cocktail, we can get at the zeroth index
because it will hold on, because it will hold only
the single area of object. And we can picture the thing
like STR, drink. Okay? And we can rename this to name. Okay. So likewise, I'm
going to do renames, hum, of the adjective property. Okay? So I'm just going to pay
all those thing here. I will rename all the property like FTR, drink that, drink. To e-mail directly or
alcoholic to info. So all this all existing property object a
day named here. And we're also going to
use this ingredient. So far ingredient,
what we have to do. So we have to define
one new ingredient. So ingredient, ingredients. And this will be the array. And inside that we are going
to have all the ingredients. Okay? So STR
ingredients like well, I'm going to define one-by-one. Okay? And after that, we're going to have in
the new cocktail, okay, so called new cocktail to
having the name image, body image in full category. So let's put in that category. After that, we're going
to have in the glass. In glass, then
instructions, ingredients. Okay. Then we can do like that, modify cocktail to new cocktail. And if you don't
have the cocktails, Then just do it that
modify cocktail to null. Okay? So this huge effect only
runs once we have id and a little cocktail
information, okay? And here we have to check. If we don't have any
modify cocktail. That means we can return. Hello. Nice to tag here. So as to with the class name
section, hyphen, title. And we can give some
description life, no cocktail to display. What we can do here. So we
can just remove this one. We don't need this one. And inside we're
going to return. Else. Let's finish the structure
from the modified cocktail. From modified cocktail,
we need name, image, category in full glass. Instructions and
ingredients. Okay? And here we can return, return that we can
use fragment first. And we can check if
there is a loading. Then I'm going to
display the spinner. Okay? So we're going to
use the div with the class name spinner grow. And it will having a
role with this status. Okay? And inside that, we're going
to using the span tag with the class name with
Willie hidden. We can give you a
live reloading. The three dots. Here, we're going to
display all the information about that particular,
particular cocktail. Now, we're going to have the section tag with the
class name, fiction, cocktail, hyphen, election, and all
the styling with this class name I have already defined in our
index dot CSS file. Okay? So you can see that you don't have to
worry about this CSS file because I have already provided the link for all the CSS file that I have used in
this application. Inside this, we're going
to have five link. Okay? So this link basically
having the Go Back button. And we want to use
button, button color. And we're going to
use some button with the class name btn,
hyphen danger. And we can give some
inline styling. So margin, top. And this will be
the button value, will be the go back. Okay? And after this link, we're going to have the H2
tag with the class name. Section title. Okay. Well, there's going
to have in the name and we're going to have another class name
with the drink. In feathered. I'm going
to use image tag, source. We're going to use
email here only. In adult. We're
going to use name. Okay? Then, then
we're going to have the div with the class
name and bring info. Then we're going to use p tag. Then we're going to use a
span tag with the class name, drink, I open data. And it's a little bit the name. Okay. And I'm glad we went
to having the name. So this thing is going
to be repetitive. So I'm just going to copy
this p tag couple of time. So let's copy around for time. So this will be the category. Okay? So we can use here category. This will be the input. So this will be the informally and this
will be the glass. Let us give glass here. And after that, we're going
to have the traction as well. This will be the instruction. Okay? And at large, we are going to display
the ingredients, Okay? So this will be a little bit
different ingredients in ingredients, OK. And let's remove this one. Because ingredients,
having that. Okay, you can see that we
have ingredient in the array. So what we can do here, so we can use here to map, okay? So ingredients, not map. We can have item and index. And we can just return the item. Then we're going to
use the tanh time. The key. If you don't
have any ingredient, Yes, I'm just going
to return the null. And yet I'm going to display all the ingredients
in this time. So we can use this item and you have to
provide the key as well. So key here I'm going
to use the in-depth. Okay? So I think I'm pretty much done with this
single cocktail and I think we are
not using the image. So where is the image tag? Okay, so here it
will be the image. So let's update this one. So we are done with
this single cocktail, and let's go to the browser and verify whether this
is working or not. So let's click on the detail. Okay, So we have
bought this cannot read property of undefined. Okay? So what we can do here. So let's go into the browser. Let's, Let's religious
obligation first, and let's click on detail. So now you can see that we
have gotten these ingredients, OK. And let's see the
other ingredients as well. So you can click on
this one as well. You can see that we have got this name category in for glass, in instruction ingredients, all this information about this particular cocktail, okay?
27. Project 2 Cocktail App - Searching Cocktail: So the next thing we're going
to work on the hydrogen, the cocktail, and guides. We have already did
some little bit work on our search input component. So let's complete that
search input component. So let us go back to
the Visual Studio code. So first, we're going
to need to write the action in our cocktails
live dot js file. So let's copy this one. Let's rename this one. So it will be the
fetch search box. And let's rename this one. Okay, we have to also
change this API. So this time we're going to
retrieve the third component. So search text and we
have to change this APA. I'm just going to
paste the API that is required for
searching the cocktails. So we're going to use this
API, hydrogen, the cocktail. And we have to define again three promise lifecycle
in our reducer. So I'm just going
to copy this three. Okay? And let's paste it here. And let's rename this one to phage cocktail, okay? Okay. And we're going to update the state of the
cocktails, okay? Because it can, because it can result more than one cocktail
with this hierarchy value. Okay? So we're going to use JD dot cocktails and we have to target again
that drinks only. Okay? So we are done with the logic in our cocktails
slide, dot js file. So let's go into the
search input dot js file. Inside this, we're going to
have touched Font submit. On submit. You're going to
have in the handle summit. And let's quickly
define this handle. And this handle some
will receive the event. This will having only just E
dot prevent default, okay? And we have to
define the onchange. Unchanged will having
the handle change to find this one as well. So handle change and this handle change and
this handled change. We're going to have
this strategy. That is, since we're
using the user. So we can get the value like
30 value dot current value. Okay? And we have to bring that first action that we have created in our
cocktail slides dot js file. So we need to go back to
the redact folder features, cocktails life, and
we have to bring that action, which
search cocktail. And we're also
going to need here. You will dispatch from our React redux to
disparage the action. First before
dispatching the action, led to store the reference of the huge disparity in
to dispatch variable. And here we can dispatch, okay. So page and we can
dispel touched. Okay. And we have to also do a few more investment
in our index.js file. And we call sometime
if you don't get the cocktail by providing the value into the
search in footfall, then in that case, you have
to display some content. Okay? So first let's go
into the index.js file. Index.js file, where we are lifting out
all the cocktail list. So we have to go back to this
cocktail list component. And here we have to check, like we don't have
the cocktails. Okay? Then simply return
with some methods. Like the method will be like no, match your criteria, okay? And we can verify this one
whether it's working or not. So let's go back to the browser. Refresh this application. Let's think gave you at
the cocktail name Adam. You can see that we have got only the cocktail with
the Adam keyword. And you can also view the information about
this particular cocktail. And it go back is also working.
28. Project 3 Shopping Cart - App Demo: Hello everyone and welcome to this section in which we
are going to learn how we can perform all kinds of shopping cart operation with the reader toolkit in
React application. And we're also going to
use Redux persist here with 3D toolkit to persist
shopping cart item value. Whenever you rephrase the app, the value will be per se. So let's have a quick
demo of this application, which we are going to
work in this section. So this is our shopping cart. And if you increase
the quantity, so you can see that the total is getting updated over here. And the community in our
cartilage also getting updated. So everywhere is updated. Whenever you update the quantity and you decrease the quantity. So this is also working. You can see that our
card quantity is getting updated and this unwanted
also getting updated. You can also remove the product
from the shopping cart. So to click on this icon, this item will get removed
from our shopping cart. And the total amount
will get updated, and the quantity will
also get updated. You can also remove
the item from this card if you
click on this again, because we have
only one quantity. And if you click again
on this down arrow, this way also, it's going to remove from this car took it. And you can also clear the cart as well by clicking
on this button. You can see that now our
soft encoded the input t. And if you wanted to
get all the item again, then your project
click on this button. And again, you can perform
the same operation, like increasing the quantity
or decreasing the quantity. And this all value
will get updated. So we're going to
write a different, different redox reaction with
the help of Frieda toolkit. And we're also going to persist
the entire shopping card. So if you refresh
this application, so you can see that
our shopping cart is persisted over here, so forth persisting, we are
using Redux percentage. So you are also going to
learn how to use paradox persist with editor toolkit
in this React application. So this is the
overall application that we are going to
build in this section. So I will see you in next video where we're going to set
up our cardiac product.
29. Project 3 Shopping Cart - Set-up: Guys, I'm going to
create a project here. So I'm in this directory. So I'm going to open a terminal. And let's create a project
and Vx Create React app. And my project name
will be shopping cart. Okay. So this will
be my project name. And let's wait for
the project creation. It will take around two to 3 min to complete this process. So I'll be back. Once this process get completed. Surveys, our project
setup is now completed. So first let's go into this
folder that is shopping cart. And we need to
install some packages before we start working
on this application. So we're going to use
MDB react UI kit. To work on our component. We need to redact toolkit. We also need React redux. We need the redox as well. And we also need your ducts persist because we are going
to persist our cart item. So let's wait for the
package installation and I'll be back one-twelfth
the package get installed. So guys, our pipette cortisol. So let's do first. And Kenneth Clark and I have already opened this project in my Visual Studio code. So let's go into the VS Code. You can see that I have open
the project in my VS code. So we have install
these packages. Toolkit, react, redox, redox, redox persist, and MDB
react to you. I could. And our application
is loading into the browser and our project and got successfully
load into the browser. Now, let's go to
the VS Code First. And let's do some
clean up first. So we don't need this one. Okay. And let's give for now
shopping cart, okay. We don't need this logo, so let's remove this one. Let's delete this file. Let's put our index.js
and here it's fine. And let's create some
file and folder. So we're going to have
one redex folder. And we're going to
have some file here. So we are going to
have navbar NodeJS. We're going to have one
navbar, one card container. And we're going to have
our item and insert Redux. We are going to have a
store which toll road. And you are going to
have one folder feature. Inside feature, we are
going to have our slides. We're dealing with the cart, so it will be
Slice, slice dot j. Okay? And let's go to the app.js file and let's verify whether
this tinnitus from getting reflected
or not reflected. Since we're using here a
material design Bootstrap. So we need to bring a CSS file for our
Material Design tab. I'm going to paste the
CSS import statement or material didn't move club. So this one, we need
to paste it over here. Now if you go to the browser, you can see that
it's called change. That means we have
successfully able to configure material design
Bootstrap in our application.
30. Project 3 Shopping Cart - Configure RTK: Now, I'm going to configure the reader toolkit
in this application. Then we're going to start
working on this component that is navbar cart item
ID card container. So I'm going to
start configuring the redact toolkit
in this application. So let's go to the cart
slash dot js file. And you need to
bring creative life. Reduct toolkit, create slides. We need. And after that, we have predefined
our slice, slice. Slice. We are predefined name, so it will be card. Okay? Then we have to define the initial
state of our application. So I'm going to have items. So basically it will have
all the product item. So I'm going to pick one data failure under
the source folder. So this data file we need
here under this source, okay. So it contains four products with title, price, and amount. So initially I'm setting
the quantity is one. So this is the quantity. Okay? Now let's go to
the cards like or JS file and we have to bring
the data file here. We import data and we
can attend this one. Okay? So initially
we are going to, so the fourth
product on our page, after that, we're going to
have total amount, okay? It will be zero initially
and total count. This will be also zero. And we're going to have reducer inside which we are going
to write our actual. Initially it will be empathy. Let's export this slide. The export default. Cart slice, taught reading said, Okay. Now let's go to this
store dot js file. And here we have to bring
your garage door tomorrow. Redact toolkit. From
redact toolkit, we need to bring
configured store. Now, we have to also bring our cart reducer from this feature folded card slice. After that, we have to
basically export our store. So cones door configuring store. And we're going to have reducer. So we're going to basically
access the state that we have defined inside these
cards light or JS file with the key card. So we're going to
assign this cart, reduce it to the car. So our store configuration
is completed. And now we have to
judge for this store, the export default store. And the last step, we have to do some configuration inside our index.js file. From React redux, we need
to bring provider first. So let's bring provider in order to connect our React
application with redex. And we can just put
this app component, in fact this provider. And we have to also
bring this tour. Let's go to this folder. And we can provide this
histo to our provider. Let's save this file and let's verify whether
our reader liquidus, lets us fully configured or not. So let's go to the browser. We got no error. So that meant two liquidus
successfully configured. You can also verify with
the reduction ductile, if you have a tall this DevTools in your Chrome extension. If you open this one. Now you can see that we
have our initial state. You can see that we have for
product inside this item. So okay, so that means we have successfully configure
our redact toolkit in this React application. So reduct toolkit
configuration part is completed over yet. Now we're going to start working
on one-by-one component. So first we will
start working on our nav bar dot js file.
31. Project 3 Shopping Cart - Navbar: Now I'm going to start on
this Navbar component. So furnished less than dendritic
snippet over here. Okay? And in app.js, we are going to have our Navbar component
and card container. Okay? So let's work on this one and we can bring our number
competently are only. Let's save this file first. And then we can
bring this navbar. So VS code automatically
import this component. You can verify this one. So you can see that
it is working. Now, let's go to this
neighbor component. And here we have to bring
some component from our material design bootstrap
from MTV react UIKit. We need to bring
MDB, MDB container, MDB, MDB, navbar link, MDB, navbar brand, MDB badge. Okay? So this all component we need. After that, what we have to do. So we have to also
bring us selector and huge dispatch from
our react to do next. Let's bring those thing first. We have already defined the initial state
inside this cart lies. So we can treat
this state, okay? In third our nav
bar dot js file. So inside navbar, we have a
cart bag on the top, right. Okay, so there we have two. So the total count. So we can read the status value with the
help of a huge selected. And we have explored the
reducer with the key card. Okay? We can accept the
stateless state dark caught. And we can capture
the total count. As of now it will be zero only. So let's work on this
Navbar component. I'm going to use fragment here. And I'm going to
use IMDB number. And here it will be expand. Allergy dark color. I'm going to give you primary. Okay. In third is IMDB number. I'm going to have
IMDB container. And then we're going to have
IMDB navbar brand, okay? And here we can give like a
redox toolkit shopping card. Okay. And in therapy
we have to pass them. If styling, I'm going to
give a styling like a line. Item will be centered. Let's give display. Let's give display flex and justify content
space between. Let's save this file and we
can verify this changes. So you can see that we are getting this one,
our nice navbar. Now after that we're going
to have MDB now Berlin. And then I'm going to use here a tag with the class
name MX, hyphen three. With Italy, I'm using here
bootstrap class name. And we can have MDB icon. And I'm going to use
Font Awesome icons. So I need to put one style sheet to
enable the Font Awesome. So this ridge tile state is required to enable
the one torso. And inside this MDB icon, we're going to have MDB bad. Okay, Let's pass some profit
in Faraday's MDB icon. So we're using
Font Awesome icon. And I can gear going to use
here swapping card. Okay? Size will be large. And color I'm going
to use here right. Now inside is MDB value. We have to provide this drop. Color will be the danger
that augments red. Notification, sorry, it
will even notification. And we have to give some
inland each tiling. And I'm going to give
font size 12 pixel. And here we are with at least showing the total count, okay? And we can verify this one
whether it's working or not. So let's go into the browser. Now you can see
that it's working. We are able to read this
zero value from our store. And currently we don't
have any item in the cart, so it's going zero. So our navbar is
complicated over here. And I think this huge
disparity is not required. But let's remove this one. So navbar part is
completed over here. Now we're going to work
on our cart container.
32. Project 3 Shopping Cart - Cart Design: So now I'm going
to start working on this card
container component. So let's send it some
snippet over here. So first, we need to
bring huge effect, okay? And again, we need here huge
dispatch and use selected from our react to
that huge selector. Usually dispatch. And we needed to bring some component from our
material to then bootstrap. The component we need
here, MDB, MDB icon. Okay? So only these two competent is required to import from our
material design trip. And here what we have to do. So first, we need to extract some state that we have in our system that we have in
our cart slash dot js file. Let's use here used selector. And we can exit the state
with state dot card. So we need here items
and total amount. Okay? Now, what we have to do. So let's remove this one. I'm going to be each fragment. And if you have the items, then I'm going to solder. So now what I'm going to do. So first, I'm going now I'm going to use
your H2 tag with the class name lead hyphen, md, hyphen, md hyphen two. And I'm going to
give you a heading like your shopping cart. Now, we have four products
inside this item. So I'm going to use this component inside
this card container. So for now, I'm just going to
generate some snippet here. I will work later. Okay? And here we have the item, so items, dot map item. And we can return
here our cart item. Okay? The VS code
automatically import this component and key. I'm going to path
yet item dot ID. And I'm going to spread
out the height down. So this material data dot
js content title price. He made him on Tokyo. So let's save this
file and let's go into the browser to flip this one. So this component is not
saying we have to be really go to our app.js file and we have to bring that
card container component. Let's save this file. Now let's go to the browser. So now you can see that this cart item component
is rendering over here. So we have four item in
the data dot js file. So it's rendering for time. Okay? After that, we have to work on this cart item dot js file. So now I'm going
to start working on this cart item component. So here we have to
bring Hughes effect. And again, we need to
bring these two things. So there's two things
we need to bring. I will use here as well. So let's bring here. Okay, Now, let's
remove this one. And I'm going to use
your inline styling. So I'm going to use here
70 and view width, okay? Max width, I'm going
to use here 90, then it will be inside
double quotes margin. I'm going to give you
a zero pixel and auto. Now inside this div, I'm going to have one more
div with the class name. Borrow. Again, I'm going to have, and again I'm going to have
some inline styling. Margin. Top. So it will be ten pixels. Okay, let's format this one. And inside this div, I'm going to have one more
div with the class name. All hyphen SM hyphen to. This compound is going to
receive props because we are spreading all the
item like this way. So it's going to receive
props here like ID, image, title, price, and amount. So I'm going to
use an image tag. In third thought, I can provide this image and in alternate, I can provide your title. I'm going to use here at
lastName, image fluid. And the style I'm going to
use here, object fit, cover. Let's format this one. I'm going to have
width and height. I'm going to have my prime only. Okay? Now, after this tape, I'm going to have
one more day with the column hyphen sm hyphen two. And I'm going to provide
the margin as a props. And here I'm going
to have h5 tag. Inside this, I'm
going to have title. So let's verify
this one for now, whether it's working or not. So let's go to the browser. So now you can see that we
are able to display the for item along with
the median title. Now after this h5 tag, I'm going to have
one more h5 tag. And this will be the price. Okay? And here I'm going
to give some color. So color I'm going to
use here has 61, 70, 98. Okay, let's see how
it's look like. So our prices
displaying over yet. Now I'm going to have
icon here, MDB icon. And I'm going to use
yet font-awesome. And this will be the draft
icon style I'm going to give here that pointer and color. I'm just going to
give you a red. And this MDB I converted
with a self close. Okay? Now after this table, I'm going to have
one more div with the class name
called fn at them. I found it. And again, I'm going to use the IMDB. I can only though. It will be like arrow up. Okay? So I'm going to use
here around Chevron. And we can remove this
color is not required here. And then I'm going
to show the amount here that I'm going
to use p tag. And inside it I'm going
to split the amount. And I'm going to give them
a line if tiling margin, top, it will be ten pixel. And after this, we are
going to have arrow down as well to basically
decrease the item quantity. And this will basically
increase the item quantity. So this will be
down, chevron down. And I think that's it for now. We can verify this one
whether it's working or not. So let's go into the browser. So it is working. You can see that we have
got arrow up, arrow down, or encouraging or degrading the item quantity. So
now here we have two. So the total amount as well. We have to continue working on this card container dot js file. So after this, I'm
going to have water. And we are going to have
one horizontal line. Then as for tag. So I'm going to provide
the millennia styling. So it will be like display, flex and justify content. Space evenly. And margin right, will be 50 pixels. And here I'm going to have
total total span tag. And we can see
here total amount. And this will be
entered in D. Okay, so let's put this
one inside a div. This div, we're going
to have MDB, btn. Now inside this MDP with him, I'm going to pass them
prompts, so color. It will be danger. On
click, we're going to have. So we will define
the onClick later. So for now, let's
remove this one. And we're going to
have each tile. So it will be width
one for typic cell. Okay? And we're going to
have margin top. So it will be 50 pixel. The button valuable
with a clear card. You can also remove all
the item from the car. So let's save this file and
let's go into the browser. Now, you can see
that it is working. And as of now, demand is zero. This one is also zero
because we haven't defined any action to update
all this value. Okay? So now we will start working on our
each hydrodissection for increasing the quantity or decreasing the quantity or
removing the item from cart. Or if you want it to remove
all the items come card, then you can also do that one
by clicking on this button. We have to define the
action for each operation. So far, I'm going to write
action to get the cart total. We have some amount
for each product, so I wanted to show the
total of this card. Okay.
33. Project 3 Shopping Cart - Cart Total Action: So let us start working on
our redact toolkit action. Now I'm going to write
a toolkit action to get the total
cart item value. Inside this reducer. I'm going to have
that redox reaction. So we're going to
have a max and light and get cart total, okay? One to having a state only. And yet when to define one
variable, listed items. So I'm going to texture hotel
amount and total count. And I'm going to use
yet reduce method. So reduce method with Italy run some kind of
operation across all array element and it will produce a single value
based on that array. So here I'm going to have
Cart Total and cart item. Okay? And then from cart item, I'm going to have this
price and amount. Okay. Then cost item, total price and took them all. So I'm just applying
yet simple math here to calculate the
value of quota lighter. And then cart. Total amount is equal to so it will be plus
is equal to total. And same thing I'm going to do for our total count as well. So cart, total, total
count and amount, Okay? Among here is nothing
but quantity, okay? Then we can return total. Okay? Now we have to also
provide the initial value. So total amount and total found, it will be zero, is one. And after that, we have to update our total
amount and total count. Let's take our total
amount is equal to I'm going to play a part in digit and go tell him on to fix. So I'm just going to fix the total amount value
of 22 decimal place. And it's not. Total count is equal
to total count. Okay? So this is completed. Now we have to export
this actual export const. And it will relate card slide, actual card total. Now we can use this action here in card container
dot js file. So we have to use
inside our use effect. And we have to first is toward the reference of unit is split into
a dispatch variable. Then only we can able
to despair that accent. So Dispatch, get cart, total. So VS code automatically
suggested me this redex action. It will automatically import. If it's not important
automatically for you, then you have to
import it manually. So let's go to the browser. Now you can see that
we are able to see the total amount of this
product, which is correct. So total quantity of product
in sopping cardiac four. You can see that here,
because initially our cart item quantity
is one, okay? So this is completed, okay?
34. Project 3 Shopping Cart -Increase, Decrease and Remove Action: Now the next action
we have to define for increasing the current item. So if you click on this arrow, it will get increased. And the price will also get updated along with this
cart value as well. So first let's define the action to increase
the item quantity. So I'm going to define
action here in gray, the cart item quantity. So here I'm going to have increased and I'm going to
have stayed along with action. And then I'm going to have a state dot items,
items, dot map. I'm going to have item. And we have to check if item dot ID is matched with
the action dot payload. Payload. Nothing but
it will be the ID. So I can dot parallel will
contain the idea that we are going to send
from our component. So if it smells and
then only we have to increase the quantity, okay? So in that case what we
have to do, a return, I'm just going to spread out the item and we
have to just update the amount item dot m plus one. And we can return the item. So this is computed. Now we have to
dispatch this action. So File export this one. And we can use this one inside
our cart item dot js file. So again, we uplift
toward the difference of usually split into
a dispatch variable. Then only we will able
to dispatch an action. So this is Chevron up. That means we can increase
the item quantity, the onclick we have
to provide here. And I'm going to dispel
that increase epsilon. So VS code automatically
suggesting with this action. And I'm going to pass the
ID that I'm receiving year other props from our card
container component. Let's save this file and
let's go to the browser. Refresh this one. Now, if we increase this one. So you can see that
this is increasing, but our card and this card quantity is
not getting updated. So what we have to do, so we have to basically do some changes
in our reuse effect. So this action will always get dispatch whenever we have
changes in the quantity. So we can pass the items
in that dependency. So whenever any changes
happen in the items array, so this will basically
get fired, okay? And we will get the
updated total item value along with the total quantity. So let's go into the browser
and refresh this one. Now, let's increase
the quantity. So as you can see
that it is updating. And yet also it's
got updated to five. You can see that it's updating. Now the next thing, we are
going to basically implement the functionality like to remove the product from
this shopping cart. Now, the next section, we're going to try to remove the product from
our shopping cart. So we can try it here actually. So we are going to have removed and we're going to have a state
along with action. And state dot items
and state lot items. Dot filter. We are going to have your item. And we have to write here basic
logic like if item dot ID is not matched with the idea that we are receiving
from component, then we have to keep
all those item and remove that particular items
come out shopping card. This will filter out that item, come out shopping card. And let export this one. Now, we can use
this action inside our cart item dot js file. So here we are going
to have onclick. We can just dispatch that one. Remove VS code automatically suggesting with this section. And we can pass the ID. Let's go into the
browser. This one. And if you click on
this delete icon, that will get deleted, the cart value is
getting updated. This shopping cart quantitate
also getting updated. So this is working. You can see that. So now the next thing we're
going to basically work on our decreased quantity. So this functionality
we have to work. So if you click on
this arrow down, so the quantity will decrease. And if you have
only one quantity, and if we click again on this, the arrow down, then it will get deleted from
our shopping cart. So we have to also take
care this thing, okay? Now I'm going to write it, irritates the accent for
decreasing the quantity. So I'm just going
to copy this one. Okay? It will be
almost identical. We upward jet fuel thing. It will be decreased.
And this time we wanted to decrease the quantity
if the ID is matched. And we also wanted to
do one more thing. Like if you have
only one quantity and if you just click
again on this arrow down, then it will get removed
from our shopping cart. So here we can do
like filtered, okay? And we can check here. If I turn dot among, it's not equal to zero. That means if it's become zero, then it will get removed
from our shopping cart. Let's say remove this one. Type wherever their
export this one. Let's use this action inside
this cart item dot js file. So here we can use onClick. So it will be decreased. Code again automatically
suggest without action. And I'm going to pass the ID. And we have to basically
path inside the dispatch. Okay, so I'm just
going to cut this one. And I'm going to put
in third and dispatch. Then only it will work. Let's go to the browser. Refresh this one. Let's
include this one. Let's degree this one.
Click on this one. It's getting updated. This will also dictate
also getting updated. And if you click again, then this item will get removed
from our shopping cart. So this is also working. This way. Also you can remove
items from swapping card. Both were working.
They say done. Now we have to work
on this clear card. If you just click
on this clear card, then all item will get removed.
35. Project 3 Shopping Cart - Empty Cart Action: So now I'm going to write a fraction bar input
data card, okay? So it can have light clear card. Okay? Well, not having a state
and state dot items to two. Okay. Let export this action. So clear card. And we have this button inside
our card container. Okay? So we can have an onclick method and we can display that
action clear card. Okay. Soviet code again, automatically suggested
me this redox reaction. Let's save this file and let's go into the browser,
read verify this one. This one, click on
this clear card. So now our Cartesian party, and if the cart is empty, then, then I don't want
it to so this thing, okay, so I wanted to swim. I say like your shopping
cart in the input. So here we can
check like if items dot length is equal to zero, that means we have a
zero item in the cart. In that case, I wanted to return like your top encoded the input t. I'm going to use the h3 tag
with the class name. And I'm going to have
the more class and yet some margin. Top four, okay? And we can give you
like you're helping. And I'm going to use your icon. I'm going to be
usually span tag. And I'm going to have MDB icon. And then third is I can, I'm going to use some icon. And I can will be like
shopping Heisenberg. And after this span tag, I'm going to select input D. You can see that we are
able to see this method. And I wondered to add one button here to get all the
items from the card. So if you wanted to play more
around this application, you can also start
from the scratch again by fitting all the
card from Irish toe. So we can have one button
here after this h3 tag. So MDB, btn. And it will be having
leg good items. And class name. I'm going to give
you a mx hyphen too. Okay. And let's see how our button look like. It's fine, Okay. Now, we have to write a basic
reading section to get all the cart from our store. So here I'm going to
write a redox reactions basically to get all the items. Okay? We can try detection. And thankfully we can do like a state dot items
is equal to data. Okay? And we can export this action. Get carte items. We can use detection inside this card container dot js file. And here we can use
on-click method. We can dispel that one. Dispatch, get guard items. Let's save this file. And let's go into the browser. Now, let's click on
this clear card. Now regardless, my three like you're stopping
by getting buddy. And if we click on
this grid item, you'll get back
all your item that we have in our data dot js file. So that way you can also play
around this application. Functionality is completed. You can see that everything
is working as expected.
36. Project 3 Shopping Cart - Persist Cart value with Redux-Persist: The last thing is left light if you are referencing
this obligation. So I wanted to persist
all the value like total along with this
value and this value. So we are going to use here to persist all the card value. So if you've read
this one for now, it will get reset. So we wanted to finish
the card value. So we're going to use root x, proceed with the reader toolkit. So guys, now I'm going
to configure it. Rejects persist in this
React application. So what I can do here, first, we need to
bring a storage. So we have already installed this package at the beginning. And we also need to Reducer
number that's persist. Persist a reducer. And we need combiner, reducer from our redox. So we bring this combined
today's from Madrid x. Now, we have to write here persist configuration,
persist conflict. We have to give you a
key role in version one. And we have two parte storage. Now we have to use
this combined reducer. Reducer is equal
to combine eraser. And we can be regulated
card this one. And you can paste here. Okay? And then you have
to persist our reducer. So persisted reducer is
equal to persist reducer. We have to pass
the configuration, this configuration, and then
we have to pack the reducer. And here we can use this one. Okay? Now we have to also do some adjustment inside this
index.js file as well. So here what we have to do, so from redex persist, need to bring persist a store. And we have to import
persist AND gate as well. Redux PR test. We have to go to
integration and react. And it will be persist. Now after that, we
opt to use this, but this can get, we have to wrap
our component with the purchased AND
gate, then persister. And here we have to use led to the store. And we can pass
here is two. Okay? And we can provide
yet practiced. So let's save this file and
verify this one in browser. Refresh this one. So we
don't have any issue. So let's perform
all the operations. So this is working. So total is getting up details. This one is also
getting a better. Now, let me refresh
this application. So you can see that after replacing our r value is
getting persisted over here. So total value is also
getting persisted. The quantitative also
getting persisted and total quantity in the car
they also getting persisted. So we have successfully
able to persist the card value as well
in this application. Now I hope you have understand the shopping cart
functionality with the help of Verita toolkit
in this React application.
37. Project 4 Blog App - Demo: In this section. First,
we're going to cover some basic concept about
Redux tool kit by building this simple blog application
in which user can post a blog or user can like or
dislike a particular blog. With the help of
this application, you are going to have some
basic idea about how to work with reduct tool kit
in a react application. For this project, we are going
to use a starter code in order to build this application
using reduct tool kit. I will see you in the next video where I will talk about
the starter code. Also, I will give you
the brief overview about the starter code which we're going to
use in this section. That's it, from this intro part. I will see you in
the next video.
38. Project 4 Blog App - Code Overview : Guys, it's time to
start working on our very first project
with red Tool kit. In this force for this project which we
are going to build, Redo kit, I have provided a source code which is
attached to this lecture. You can find that
the source code of this starter project before we move on and write some code, let me give you a brief overview
about this starter code. I have created this project
using this reducing template. You don't have to do this step. I have already provided the source code which is
attached to this lecture. Let's go back to the VS code. You can see that I
have one as file. I have also use here bootstrap, so that we can avoid
writing CSS code. On left hand side, we have a block form from that
we can publish our blog. On right hand side,
I'm rendering the blog list which is
submitted by this blog form. At the moment, we
just have a heading. If I go back to the browser, you can see that on left hand side we
have a block form and right hand side we
have a blog list in which I'm going to
render all the blogs. Let's go back to VS code again. Here we have index JS file. We have app and feature in app, we have a store configuration. At the moment, we don't have
any reducer. This is empty. We have a feature
folder in which I have one block folder in which
I have form and blog list. Okay, This is a very
basic form which I have written here that the
user can publish the blog. Here, I have just provided
you the source code of this file so that we can more focus on learning
the red toolkit concept. Here we have a very basic form. We have one dropdown
for selecting user. We have input field for title, and we have a body for our blog. Now we have a blog list as well. Okay, so at the moment, I'm rendering the two blocks
from this component itself. Okay, here we have a
blog user as well. We are also going to show this blog is created
by which user? Okay. At the moment it
is just plain, okay. And we have a
response button here. Basically you can like
or unlike the blog, this is a very basic component. Now let's go back to
this index GS file. Basically, we are
providing the store to our app so that our component
can access the state, which we are going to
define in our store. Earlier, I have already
informed you that in this project I'm going to use
a bootstrap version five. I have already picked the CDN or the
bootstrap version five, so that we can avoid
writing in this project. Now let's talk
about this package, Json file as well. Here we have got this reduct
toolkit and react reduct, which is important to work with the reduct toolkit in
a react application. I have already got
this two dependency. Whenever you set up a react
project with this command, whenever you create a, any react project
with this command, you are going to get this two
dependency along with that. That is react reduct
and reduct tool. This is all about the overview of this block starter project.
39. Project 4 Blog App - Blog Slice: Now let's start working on
this simple blog obligation. First, I'm going
to create a slice here that will be like blogs. Liz, I'm going to import slice from red slide. Basically is used to define our initial state and
action and reducer. For that purpose, we are
creating a slice, create slice. We need to bring after that, what we need to do here, we have to define a block slice. We can use this create slice
which cannot be object, and we have to
define a slice name. I'm going to give
a slice name here, block, we're going to
have initial state. Okay? So let me define
a initial state here, only from this
block list JS file. I'm just going to
cut this one, okay? And I'm just going to
paste it over here. Let me rename to
initially state. Okay, we got our initial state, now we're going to having
a reducer in which we're going to write an action at the moment, let it be pet. Let me export this one
fault block lider. We're exporting this reducer. We're going to hook up this
reducer in our store Js file. Okay, let me go back to
this app folder here. I'm going to bring
that block reducer. Block reducer here. We have to go to this
feature folder and blocks and we have
to use this file. Now we can hook up our reducer
in this reducer object. So blocks, we can give any
key, whatever you want. So I'm giving over blocks, we can just assign blocks. Reducer. Let's save
this file here. Everything is fine,
I guess, Okay.
40. Project 4 Blog App - List Blog with useSelector: Now let's go to this
blog list file here. First, I'm going to bring a
selector from react reader. Because we need to
select the state that we have defined in this blog lies. For that purpose, we need, let's bring here selector. Then we can have our
blogs blogs to selector. Here we can access
our all block from this state block because our reducer is registered
with the key blocks here. Okay, now we got our all blocks. Okay, We are using this render block function
to render all the blog. We have ID title content. Okay, Blog user. So at the moment we don't
have any basically user. Okay. In this life you can see that it's going to just
render the unknown user okay. We will write the logic for
user letter in this project. First, let's focus on renting the blog In
our application, we got this blog from our store and we're rendering the
blog using this function. Let's go to this apps file and remove this
art coded heading, and I'm going to bring
the blog list component. Okay, so let me save this file, let's go into the browser now. Here you can see that we
got our two block that we have defined in this
block flies js file. Okay, We got this
two initial block. This part is completed, where we have learned
how to select the state from the store. This part is over now.
41. Project 4 Blog App - Create blog selector: Now before we move forward
and use this component, we need to talk about
this huge selector. Because right now it received the state and then
we got state block. But if structure of our
state change like right now, this component should
know something about state need to know
we go state block, it could be state blog, something else in the future. It would be better if we create selector in the slice
and then export it. That way if the shape of
state ever changed in future, we don't have to go through
and change each component. We could change
once in the slide. Let's do that in our
block slices here. We're going to
create a selected, I'm going to export
that one file. Export, select all blocks. We are going to have
a anonymous function which is going to the A state. This will be state blocks, okay? Now we can bring this selector in this block list JS file. Let me bring that
one from block lies. We need to select
all blocks here. We can just pass,
select all blocks. Okay? Let's save this file. Let's head over to the browser. This is still working
with that approach. The selector part is also
completed in this application.
42. Project 4 Blog App - Create action to add blog: Now let's move
forward and create reducer function or adding
the blog in our application. I'm going to add action here
inside this reducer object. We are going to have a blog. Okay, it's going to
having a state action, we can do something like this. State, push and action do payload here,
action do payload. Basically the information about our blog which basically
contain title, body, and user ID. This is our action which we have brought in our reducer object. Now we will talk about
this state push in a second because if you're
familiar enough with the react, we don't usually mutate a state. And that dot push
would do in a array. We will talk in a moment. Let me first export
this function. We're going to having a blog lies action here creates lies. Basically generate an accent created with the same name which we have defined over here. That is at blog. Going to automatically
generate the accent creator.
43. Project 4 Blog App - Understand immer js role: Now let's talk about this state push that we
have written over here. We generally used to writing a state like
spreading the state. Then we have a action payload as a new item instead
of state push but read toolkit use emerges under the hood that allow you to write your Java
script like this. Where you would normally
be mutating the state. But it is not mutating. The state emerges, create
new state underneath. Now we realize this only
work inside of create slice, where else in your
application you still need to use proper way of
not mutating the state. However, inside creates lie. You can use state push
and you can directly the state in other ways as
well emerges will handle that. It make it easier to
handle inside of here.
44. Project 4 Blog App - Dispatch action to add blog: So let's move forward and use this action in our
form component. Let's go to this at
block forms file. We are going to use this action that we
have just created. Now in our blog slice, we have already a
basic form over here. You can see that for now. I'm just going to
commend this dropdown. Let's just focus on publishing the blog with title and body. We have on E on Summit in which we have just
prevent default, we have this handle
change for basically tracking the state
of each field. That is we have over here
like input and text area. And we are going to
write a logic to submit the blog in
this on summit only. So first we need to
bring a huge dispatch. Okay, so we need to bring a
huge dispatch from a red. In order to dispatch an action, huge dispatch, we have to store the reference of huge dispatch into a
dispatch variable. We have to store the reference
of this huge dispatch into this dispatch variable that
we can dispatch an action. Now here what we have
to do first here, I'm just going to
check like if we have the title then we are going to basically
dispatch dispatch. We have to also
bring the action. Let's bring the action as well. From our blog lies a blog
I have bring over here. We can dispatch
here like a blog. Here we have to first
provide the ID. I'm going to use a nano ID from red toolkit folk we need basically a unique
ID for that purpose. To bring a nano ID duct toolkit, that every block should
contain a unique ID. Here we can use nano ID and that will be
with parentheses. Now we can stand title. And after that, we wanted to basically
clear each input field, that is title and body set form. Let's make it empty. This title, input field
and body exterior. After submitting the blog, let's check whether
it's working or not. Let's go into the browser. And here I have forget to bring the component in our
app dot JS file. Let me bring the
component add block form. Now let's go into the browser. There is some issue
with the styling. Let me see what is going on. We need to add styling in
our index dot CSS file. I'm just going to paste styling. This basic styling we have
to add in our index file. Don't worry, this styling
always present in your star. You don't have to
worry about that part. Let's save this one and
let's go into the browser. Good, Okay, let me rephrase the application.
It's looking good. Now we have to publish our
first blog by dispatching this action that we
have defined here. Okay, in our summit. Let's see whether
it's working or not. Let me just give test. Okay, let me what's going on? Let's click on Submit. We got some let, okay, let me see
what's going on here. It will be Body Content. Make sure to change this
one from content to body. Now let's go into the browser and reflect this application. We are still getting the issue. It will be body not content. Okay, let's save this one. Let's go into the browser. Now we've got our two post, okay, let's close this one. Let's publish our blog
with the action that we have just created
in our blogs lies. Let's give it a T.
Let's click on Submit. You can see that
this is working. So we have successfully able
to add a simple blog with our action that we have just created with the
help of toolkit.
45. Project 4 Blog App - Use Prepare Callback: Now our form is
working perfectly. But it could be better. Let's talk about that, because right now it needs to know the details
about the state. Once again, in order
to send it properly, it has to send a properly
formatted object. And it will be better if we
could attract some of that. We don't want to duplicate
this type of logic in every component that post
to our global state. Instead, we can
handle this back in our fly with a prepare Callback. And Prepare Callback can generate unique ID
format the data, return the object with payload. And that's basically
what we are doing here. This will really simplify our component and it will
handle everything once again, back in the slice, Let's go to the Slice here. We have to modify our ad blog. What we can do over here, Let me just cut this one here. We are going to have a reducer. Okay, we are going to have,
again, the same thing. That is state and action. We can just do like
state, push with action. Payload. Action, payload. Here we can define our
prepare call back. Now we can pass the
title and body. Then we can return
formatted object. Okay? And it's going to
return with the payload. Payload again, we are
going to have ID here. Again, we need to
bring here nano ID. Let's bring in nano
ID, red toolkit. Then we can have
our title and body. Okay, but we are missing
something over here. Form and something we are missing. Let me check here. We have to remove I
guess the two things. Okay, and for return, we have to use this. My call I think
for This is fine. Check. Okay, this is also look good and here we have
to add one more. Okay, so let me
format this one now. It's fine. You can see that here we pass
the title and body we would get from the component and then it returned the action payload as it needs to be formatted. We have returned over here and then we have a
payload where we define ID with nano ID
along with title and body. We have modify our slice
with the prepare call back. Now we have to also adjust
to thing in our block form. From here we can remove this object and we
can just pass and body the rest of the
thing will handle in our slice with this prepare call back which we have just
defined over here. Okay, let's go
back to this form. The benefit here is that
our component once again, doesn't even have to know the structure of
the state at all. Now, everything is handled
inside of the slide. We can just send the raw
data that we need to. Let's try this one
in our browser. I'm going back to
my browser again. Let's reflect this application. Let's give some title
test, Test it Summit. Now you can see that
this is working. With this repair call back, we are successfully able
to publish our blog. This part is completed here. We basically simplify or code
a little bit in our slice. Now we are done with this
and we can remove this one. We don't need nanoDceo. Longer need the ID for creating blog because everything is
handled inside our slice. Let's get rid of this.
46. Project 4 Blog App - Redux dev tool: Now before we move
forward and on the part where we are going
to select from the drop down, let's just talk about the redo. Let me go back to the browser,
refresh this application. First, I'm going to
open a Redcap tool. You can install the duct
tape tool extension in your browser. I'm going to open to my right. Okay, let me just refresh
this application. Here you can see that the
state of our application, we got this two block
in our initial state. And you can see the state in a different format like chart. You can see in the chart. You can also see in the raw
format you have a different, different format to view the
state of our application. Red basically is used to track the application state
and also you can track the action that
you are going to dispel. Let's try to add
one block again. I'm just going to give
you a test again. Let's see, Opto, you
can see that we have dispatched our ad blog
action in the red depo. You can also track
the action dispatch. We got this action. Okay,
now we got three blog. In our application,
this blog is added. You can see that this newly
blog is added in our store. You can also calculate
the difference here. Okay, this new blog is
added in our store. This is action that we have just dispatched by hitting
the Submit button. This is all about the
basic overview of Reduct Tap tool and how to use this reduce tool whenever you are using reduct in
a react application. Now, I'm going to
minimize this one.
47. Project 4 Blog App - Create user slice: Now I'm going to
start working on the user part in this
application so that user can able to
select the user from the drop down while
submitting the blog. I'm going to have one more
folder inside this features. I'm going to have a
folder like users, we are going to have a lies, lies as, again, I need to create
slice from Reduct toolkit. Let's spring from
Reduct toolkit slice. Then I'm just going to
place the initial state. We are going to have some
default user so that you can select from
the user dropdown. Now after that, we're going
to have a user slice. We are going to provide
the slice name. It will be, we can pass
her initial state. The reducer will be
the empty object. Now again I'm going to create
a selector here for the user export select all. We're going to having
a anonymous function. It will be state and states. Then we can export
export default reducer. Then we can hook up this
reducer in our store. Let's go to this stores file. I can just copy this one,
this import statement. This will be user, it
will be coming from lies. We need to change
the entire part. It will be coming from users
folder and then users slice. Here it will be,
and users reducer. We are done with the user
slice in this application.
48. Project 4 Blog App - List users in Dropdown: Now let's go back
to this block form. Here we need to bring
all the users first. We need to bring
selector as well. Here we can have our all user, okay, we can bring the selector that we have
just defined in this slice. Let's bring this select all user VS code is going to
automatically import for me. Okay, It's not
importing in your case, so you have to
import it manually. Now we got all the users, okay, we can just uncomment
this line of code here. What we have to do,
let's have a option. Option. We want all the users, we can map over it. We're going to, having an
option will be like user. We can key here a value user. Then inside this user name. Let's use this user option here. In the drop down here, we can have users option. Let's see whether
we are able to see the user or not in the dropdown. Let's go back to the browser. Here we've got our
three users that we have defined in our user life, That is John Doe, Nancy and James Bond. This part is done, but still we have to do
some modification as well before we publish our new blog
with this latest changes.
49. Project 4 Blog App - Modify Action & Prepare callback: What changes we have
to do over here. Let's understand that one, while adding the block, we are also going
to pass the user. Okay. Here what we
are going to do, you can see that for dropdown we're using here, handle, user, handle user basically is
going to restore the user, okay, It's going to
restore the user ID. As you can see that here
in handle user function. Let's pass here user ID as well. Because initially state we
have defined three things like title body and user
ID for our blog form, we are passing this
user ID since we have this action part while
dispatching this ad block, we have added one more argument, that is user ID, like which user is basically
publishing the blog. We have to also
modify or prepare callback function that we
have defined in the blog li, let's go into that file. Let me go back to that
file that is blog slice. So now it's going to
receive the user ID. Okay. So user ID is going to receive and it will be user ID. Okay. So we have modify
our prepare call back.
50. Project 4 Blog App - Show blog with User: Now we have to also do some changes in our
blog user component. Okay, At the moment it's just
showing the unknown user. We are not displaying
the user name. Okay, before we do that, let's go back to
this blog list file. Here. You can see that
we're passing the user ID. We are mapping each block that we are receiving
from our store. And we are passing
the user ID here, okay, to this blog
user component. We can mention
this user ID here. Okay, after that,
what we have to do, we need to bring first
selector from react reader. Because we need to find which user is basically
publishing the blog, we need first all the
users that we have in our user slice select first. Then we need first of all, all the users selector. And we can pass here the selector that we have
defined in the user slice, select all users port
automatically port for me. Then after that we can
write a basic logic here. We need to find that particular
user we can use here all the users find we're
going to have each user, we are already receiving the user ID from our
block list component. It will be like dot ID. And if the ID is matched, then we are going to grab that user and we are
going to show the name. What we have to do over here, let's remove this one first. If we have the user, then username L, it
will be unknown user. Okay, let's save this file. Let's go to this ad block
form js file as well. Here. I'm also going to empty
the dropdown field as well, user ID, and it will be empty
after submitting the blog. Before we publish a blog
with all these changes, I wanted to make the
Submit button disabled until all the field get
filled by the user. What I can do, I can
have one is fill. It's going to check whether each input field has
some value or not. We can use your
bullion title Bullion, it will be body bullion, it will be user ID. This button will be disabled. If any input filed left empty, we can just check
this one. Okay? Let's see whether
it's working or not. We need to go back to the
browser. Rephrase this one. I'm going to select a
user here, John Doe. Let's give a title test. Let's give a body test. Now you can see that
this button got able after submitting the value
in each input field. Let's click on
Summit. Now you can see that this time we got
the user name as well. That is John Doe. Okay, this part is
also completed over here and you can
see that we have successfully able to publish a blog with the
user name as well. We are done here with
selecting the user and publish the blog with
the specific user name.
51. Project 4 Blog App - Redux action for Like/Unlike: Let's move forward
and work on the rest of the functionality that
we have in the application. We have to also implement the functionality
like and dislike. Whenever user click on
like or dislike button, it's going to increase. Let's work on that
feature as well. With reduct tool kit, we need to write a reducer
function for that. And before we write
a reducer function, let's modify repair
call back again. You can see that in
initial state we have a response object and unlike we are going to have the same thing in the
repair call back as well. First, let's give
response, okay? And it will be like initially, it will be ero, all the
count will be zero. Now, whenever a user created
a blog, let's save this one. Now let's start writing a reducer function for liking
or disliking the p. I'm going to have here
response added reducer function which
is responsible for or disliking the ping a state
action from action payload. We are going to
receive two things. Whenever a user dispatch an action while liking
or disliking the P's going to receive blog
ID and the response. You can see that this
component here have a name and emoji I have used
over here like object entry. Because this is a object
and we are mapping over it, this name is key
and mog is value. We are going to pass two things, that is which block we are basically liking and the image. We will work later
on this component. First, let's work on this reducer function
faction payload. We are going to
receive two things, that is blog ID and response. We have to check
existing blog in state. We have got our all
blog state find, we're going to have blog first. We have to basically
match the blog, which blog we are basically
liking, disliking. First, we have to grab particular blog and here
we can give this blog ID. If you have the existing blog, then existing blog response. Here, response here, basically we are going
to increment, okay?
52. Project 4 Blog App - Show Like/Unlike count using Redux: What we have to do next. Thing we need to bring
first huge dispatch from react reducts, huge dispatch. Here we need to first the reference of dispatch
into a dispatch variable. This component is also
going to receive a blog. Okay, From our blog list. Okay. You can see that at the moment we are
not passing anything. Let's pass her blog and we
can just particular block. Okay, now this response
button component is receiving the
particular blog. Here what we can do on click, we can basically dispatch
an action dispatch. We can bring the action. We have created the action, but I guess we haven't export. Let's export this one. Okay. Now let's go back to this
response button here. First, we need to
bring that one. We need to bring that function reducer function blog slice. We have to bring response added. Then we can dispatch
this response added. We have to pass two things. That is, first blog ID, we are already getting from
this blog blog dot ID. It will be, namely we have
to also show the count. Let's do that. One blog response and we can pass here name. Let's go into the browser and see whether it's
working or not. First, refer this one. Now you can see that initially
we got the count zero. Okay. If you click on this
one, it's not incrementing. Let me see what's going on. We are able to dispatch
an action or not. First, let's see that one action is not dispatching at all. Actually, we have write this reducer function
outside this reducer object, okay? It's closing here. We need to write here actually. Okay, this one. And paste it over here. Refresh this one first. This is working, okay? As you can see that this
is getting incremented. Let's add one blog
here with Nancy. Let's give you a test. Let's just copy this one. Let's submit, let's see whether we are able to like or not this newly created blog. This is also work. You can see that our functionality is also working in
this application. With the help of reader took. It seems like everything is working in this Imple
blog application.
53. Wrap up: If you are watching this video, that means you have successfully completed this course
and I hope you have got full understanding
about how to work with reduct toolkit
in React application. After that, you will
also able to integrate redact toolkit in any
existing react rejected. And you can also able to convert those React project
in which old Redux code use those projects you can easily convert into
Reduction Toolkit. That's it from my end. If you have any query or dot, then you can put your query
in the comment section. I will try my level best
to solve your query. You can also visit my YouTube channel to
get more content on reactant or product
that you can gain more knowledge on React
and editor on Thursday, you can always visit my this official YouTube channel for more rift of one reactant. And if you look at my playlist, I have a different, different
pose debt on a React. I have some beginner
project, reduct project. I have also built them
clone application, and I have also a
full-stack application. So guys, you can always visit my official YouTube channel for more than one
reactant Redux. That's it from my end. Thank you so much guys
for taking this course. I will see you in other courses.