Complete Guide to Redux-Toolkit with React JS | Saumitra Vishal | Skillshare
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Complete Guide to Redux-Toolkit with React JS

teacher avatar Saumitra Vishal, Front End Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      3:18

    • 2.

      What is Redux & why we use it ?

      2:29

    • 3.

      What is Redux Toolkit ?

      3:16

    • 4.

      Understand Redux-Toolkit API

      2:53

    • 5.

      Understand createAsyncThunk

      3:03

    • 6.

      Project 1 - Set-Up

      2:42

    • 7.

      Project 1 - Structuring our App

      4:07

    • 8.

      Project 1 - Working on Form

      5:57

    • 9.

      Project 1 - Configuration & Writing GET Action using createAsyncThunk

      9:47

    • 10.

      Project 1 - Dispatch GET createAsyncThunk Action

      7:31

    • 11.

      Project 1 - Adding Buttons

      2:03

    • 12.

      Project 1 - DELETE with createAsyncThunk

      3:07

    • 13.

      Project 1 - POST action with createAsyncThunk

      3:22

    • 14.

      Project 1 - Working on Create Post Form

      7:08

    • 15.

      Project 1 - Dispatch POST createAsyncThunk action

      5:38

    • 16.

      Project 1 - PUT action with createAsyncThunk

      4:13

    • 17.

      Project 1 - Populate Post Data on Form

      6:22

    • 18.

      Project 1 - Dispatch PUT createAsyncThunk action to Update

      4:08

    • 19.

      Project 2 Cocktail App - Demo

      1:33

    • 20.

      Project 2 Cocktail App - Set-up

      2:44

    • 21.

      Project 2 Cocktail App - Header

      2:44

    • 22.

      Project 2 Cocktail App - Configure Redux-Toolkit

      12:01

    • 23.

      Project 2 Cocktail App - Search Component

      4:09

    • 24.

      Project 2 Cocktail App - Show Cocktails using Actions

      14:01

    • 25.

      Project 2 Cocktail App - Action to Fetch Cocktail

      2:17

    • 26.

      Project 2 Cocktail App - Cocktail Detail Page

      15:54

    • 27.

      Project 2 Cocktail App - Searching Cocktail

      6:01

    • 28.

      Project 3 Shopping Cart - App Demo

      2:31

    • 29.

      Project 3 Shopping Cart - Set-up

      4:14

    • 30.

      Project 3 Shopping Cart - Configure RTK

      5:17

    • 31.

      Project 3 Shopping Cart - Navbar

      6:51

    • 32.

      Project 3 Shopping Cart - Cart Design

      14:00

    • 33.

      Project 3 Shopping Cart - Cart Total Action

      4:51

    • 34.

      Project 3 Shopping Cart -Increase, Decrease and Remove Action

      8:56

    • 35.

      Project 3 Shopping Cart - Empty Cart Action

      5:09

    • 36.

      Project 3 Shopping Cart - Persist Cart value with Redux-Persist

      4:57

    • 37.

      Project 4 Blog App - Demo

      0:43

    • 38.

      Project 4 Blog App - Code Overview

      4:03

    • 39.

      Project 4 Blog App - Blog Slice

      3:07

    • 40.

      Project 4 Blog App - List Blog with useSelector

      2:32

    • 41.

      Project 4 Blog App - Create blog selector

      2:00

    • 42.

      Project 4 Blog App - Create action to add blog

      1:43

    • 43.

      Project 4 Blog App - Understand immer js role

      1:06

    • 44.

      Project 4 Blog App - Dispatch action to add blog

      6:29

    • 45.

      Project 4 Blog App - Use Prepare Callback

      5:42

    • 46.

      Project 4 Blog App - Redux dev tool

      2:18

    • 47.

      Project 4 Blog App - Create user slice

      2:42

    • 48.

      Project 4 Blog App - List users in Dropdown

      2:30

    • 49.

      Project 4 Blog App - Modify Action & Prepare callback

      1:47

    • 50.

      Project 4 Blog App - Show blog with User

      4:37

    • 51.

      Project 4 Blog App - Redux action for Like/Unlike

      3:49

    • 52.

      Project 4 Blog App - Show Like/Unlike count using Redux

      4:26

    • 53.

      Wrap up

      1:24

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

271

Students

--

Project

About This Class

Become a highly-demanded Frontend developer by adding the Redux-Toolkit Skill set into your React knowledge. This course is desgined in such way that anybody can get enroll into this course who wanted to enhance their Redux concept.

This project-based course will have you coding right away. Building application with the help of React and Redux-Toolkit in this course will sharpen your skills in modern web development.

With the help of createAsyncThunk middleware, you will get know how to work with api in React Application. And I am sure after taking this course you will become master to implement Redux-Toolkit in any one of your existing React application.

In this course, you will learn below key concept related to Redux-Toolkit with React:

  • How Redux-toolkit fits into a front end single page application with React?

  • What is Redux-Toolkit and it's API ?

  • How to configure store with Redux-Toolkit ?

  • Learn different Redux-Toolkit API like createSlice, configureStore, createAction, createReducer & createAsyncThunk

  • How to make an API request with Redux-Tookit using createAsyncThunk middleware and deal with the response ?

  • Understanding different promise lifecyle that get generated by createAsyncThunk middleware.

  • Learn Ant Design frameowrk to build React component.

Basic Requirement

  • Some sort of HTML, CSS and JavaScript knowledge required.
  • Basic understand of ES6 module
  • Basic React knowledge will added an Advantage.
  • Redux knowledge required little bit but I will explain from scratch.
  • No prior working experience required with JSON server.

Software Requirement

Meet Your Teacher

Teacher Profile Image

Saumitra Vishal

Front End Developer

Teacher

I am front-end Web developer, specialize in the area of React JS

I have a bachelor degree in Computer Science from KIIT University. 

Will be happy to share my knowledge and create great content for everybody who wants to join my classes.

You can also join me on my YouTube platform, I have more than 8k subscriber on my Youtube Channel.

Let's build awesome things together :)

See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

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.