Complete Redux Tutorial For the React Developer - [2021]

so from this lecture we're going to start redux so what is redux redux is used mostly for application state management to summarize it redux maintains the state of an entire application in a single immutable state tree or you can say in an immutable state object which can't be changed directly context api and redux have the same concept they help us to store the state in a container or you can say in a store building redux is entirely different from the context api so let's first understand how detects work in the react application so how did that work the way redux works is simple there is a central store that holds the entire state of your application each component can access the store state without having to send down props from one component to another there are main three building parts of the redux action store and reducer let's briefly discuss what each of them does so let's start with the action action are event they are the only way you can send the data from your application to the redux store in redux you send the data to the store using an action event the data can be from user interaction api calls or even from form submissions actions are sent using the store dispatch method action must also have a payload that contains the information that should be worked on by the action actions are created by an action creator for example to create an action you just simply create a simple javascript object and inside that object you have a type of action and a payload you first specify which type of action you are creating you can notice here we are creating a type of create action and in the payload we pass the data we want to send to the store we specify the type object and then pass the payload payload is just information we pass the store when the create event happen or you can say when the create action happen just out of that we have reducer so let's see what reducers reducer are pure functions that take a current state of an application performs an action and return a new state these states are stored as an object and they specify how the state of an application changes in response to an action sent to the store basically reducer take the current state of the application and as a second parameter it takes an action and then return a new state understanding how reducer work is important because they perform most of the work so let's see how to create a reducer to create a reducer we simply create a function you can create a function with a function keyword as well or you can create a variable and then pass arrow function to it here i create a variable reducer and pass an arrow function to it inside this arrow function i have two parameters state and action and then i just return updated state to the reducer function reducer is a pure function we not can use any external value inside the reducer that is why we call it pure function when the action is triggered we call the reducer of that action and return the initial or the updated state depending on the condition we have in the reducer right now you can notice inside the reducer we are returning the updated state next we have store so what is store store holds the application state inside the store redux will store all your state data it is highly recommended to keep only one store in any redux application in the store you can access the state store update the state and register or unregister the listener why the helper method let's see how to create a store to create a store you can just simply create a variable store and then call a function create store we get this function from the redux library so before we add this function we need to import the redux library inside the file and import this create store function from it and then we can use this function to create a new store action performed on the state always return a new state so these are three important concept of redux there have been other important concepts as well in redux we will look at that step by step if you want to know more about redux head on to redux dot js.org and from this website you can get more information about redux so in a theory next we are going to take a look at how to create a store reducer and action in redux now let's take a look at how to create a store reducer and action in the reactor application in the previous lecture we understand what is store reducer and action in this lecture we're going to talk about how you can add all these three important concept in your react application redux is a simple 2kb library you can just simply add this library in your react application by using npm install command so you just need to open your terminal change your directory and enter into your project directory inside your project directory you need to just execute a command npm node package manager i for install and then install redux along with that you need a library react redux so i'm going to install that as well so i'm going to say here react redux make sure the name of both these libraries is exactly same otherwise you will get an error message so i'm going to install redux and react redux in my application first so i'm gonna press enter here this will just take few seconds to install both this library in my application once i've done that let me clear the screen back to my bash one and restart my server like this so let's first understand how to create an action so i'm going to just create a new folder inside this source folder right here i'm going to create a new folder and i'm going to name it redux and inside this redux folder i'm going to create a new file and name this file redux info dot js inside this redux info let me first create redux action so as i said in the previous lecture action is just a pure javascript object so let me just first create here a command and say here action to create an action we start with a constant keyword or you can start with the let or var keyword as well if you don't want to change the value of this object you can use constant here so i'm going to start with the constant and then specify the action name i'm going to say here add to do action you can specify any name to this action that's upon you this is just a variable name and i'm going to specify equal to sign and then pass an object here a simple javascript object inside this object you have two keys first is a type and second is a payload using this first key we specify what type of action is this i want to create a new post so i'm going to just say here inside this type create this is always a best practice to put your action in a capital letters so when you call this action in the reducer the action will not mismatch so we put the action in a capital letters so this is the type of create action just after that as i said inside the payload we pass the data that we want to update in the store so for example inside this payload if i say a new post for redux so when i call this action react will update the state with this payload you can notice how easy it is to create an action in redux application we just created a simple object with two keys now you might have multiple types or multiple actions inside this object that's upon you now let's see how to create a reducer to create a reducer i'm going to first create here a command and say reducer creating reducer in redux is super easy reducer is a pure javascript function to create a reducer i'm going to start with the constant keyword and then say here reducer you can specify any name to this constant keyword just for understanding i specify here reducer and then i'm going to pass here a pure function so i'm going to pass here and add a function like this to this parenthesis i'm gonna pass two parameters first is a state and second is an action state parameter is an initial value of the store an action help us to update the initial state value without an action you can't update the store and this store is going to return a simple state so this is a simple syntax of reducer now the reducer first parameter is the initial state of your store so when we create a reducer we pass the initial state to this parameter for example if i just create here a variable constant initial state is equal to and inside this object i'm gonna say here post and pass and add here so i'm gonna just create here a simple initial state and pass post key to it and the value is empty array i'm gonna pass this initial state to this parameter so i'm going to just specify here equal to sign and then specify here initial state like this so this is the default value of this state parameter now just for that we have here a second parameter call action using this action will return the updated state for example here inside this reducer i'm going to add here an action i'm going to see here if inside this parenthesis inside a condition i'm going to say action dot type if it is equal to create then i'm gonna return state plus one i'm gonna just update this state value by one now keep in mind this is just a syntax of reducer i'm not updating this initial value because as you can see here inside this initial value i have post and i'm updating this state directly without accessing this post key this is just a syntax we use action parameter to check the action using if or switch statement and then in the action we return the updated state that's the simple use of reducer and then once we have the reducer we pass this reducer to the store so just down here i'm going to create a store so i'm going to add here a command and say store to create a store i'm going to say here constant store is equal to and i'm going to call here a function called create store as you know we don't have this function inside this file let me just import it at the top here i'm going to say import in the current process i'm going to say create store from in the single quote i'm going to say redux from the redux package i'm going to get this create store function we need to pass here curly braces because create store is not a default export so i'm going to say here create store so i can easily access this create store function and as a parameter you can see you need to pass your reducer so i'm going to say here reducer like this so this will just simply create a store in redux and at the end you need to just export this store so this statement is simply going to create a store using the reducer now this is the syntax of action reducer and a store next we're going to create a simple example of redux and see how to work with store reducer and action together now in this lecture we're going to take a simple example of redux and understand how to work with it so let me just create a simple file inside this redux folder here i'm going to create a new file and i'm creating a counter example so i'm going to name this component counter.js to understand how redux work counter is the best example so i'm going to simply create here a file counter.js and inside it i'm going to create a class component so i'm going to say here react class component don't worry you can use redux in the functional component as well we'll look at that later in this course so just for now let's add this counter and let me just add this counter inside my main component so let me just copy this counter and let me just add that here instead of this multiple context i'm going to say here counter and i'm going to specify here redux counter let me just add here counter and save this file back to your counter and inside this division tag inside this jsx here i'm going to simply add a two heading tag and say counter just out of this h2 here i'm going to add a division tag again and inside this tier i'm going to add my button i'm going to name this button minus and inside this button i'm going to add on click event and just sort of that inside this curly braces i'm going to add the handler function of it just down here i'm going to add the value of the counter so inside the spawn tag here i'm going to add the value of the counter so i'm going to simply add here curly braces for now and just down here i'm going to add a button again and then specify plus here to add a value in a counter so i'm going to add here on click event and pass curly presses now this is a simple jsx right i'm going to add two buttons here with on click events and i'm going to print the counter value inside this span tag now let me create handler function for both these buttons at the top here before this render method i'm going to create handler function so i'm going to say here increment is equal to and pass an arrow function here just for that here i'm going to say console.log increment i'm going to do the same so i'm going to copy this function and specify here decrement like this let me copy this paste it here to indicate this is the decrement method inside this on click here i'm going to first call this dot decrement this decrement handler function and to this plus sign i'm going to call here this dot increment now just out of that here inside this pawn i'm going to create a property called count so i'm going to see here this dot props dot count i'm gonna create here a property count and i'm gonna specify value to this count using the redux now let me save this file here you can notice i'm gonna have your minus and plus button when i click on it i'm to get increment and decrement console message now just for that let me first create a reducer because reducer performs most of the work so inside this redux folder i'm going to create a new file and name it reducer dot js and inside this reducer i'm going to create a reducer function to create a reducer function as i said in the previous lecture there is a syntax so i'm going to start with the function keyword then specify the name of the reducer i'm going to say here reducer and then i'm going to specify a parenthesis inside this parenthesis you have two parameters state and action and inside this reducer you return a state for now i'm going to leave it as it is and let me first initialize this state so at the top here i'm going to create a constant variable and specify initial state is equal to and here i'm going to create count key with the value 0. so this is the initial value of my count variable i'm going to pass that to this state so i'm going to say here equal to sign and say initial state so this is the initial value of your state so as i said in the previous lecture as a first parameter we pass the initial state of the store and then as a second parameter we are going to pass the action the action we perform using button click form submission and so on just for that inside this function here i'm going to say if action dot type is equal to in the double quote in the capital letters i'm going to say increment if it is equal to increment then i'm going to execute this if statement otherwise i'm going to add here else if again most of the time you have multiple actions using each statement here is not sensible so what i'm going to do is i'm going to use here switch case statement instead of if statement i'm going to get rid of this if and here i'm going to call switch i'm going to say here switch action dot type and inside this curly braces i'm going to add my first case inside this first case if the action is equal to increment then i'm going to return my state when we click on this button we're going to pass value to this type property don't worry about that inside this type we have the action type we're going to pass that when we click on the button for now just out of this first case i'm going to add my second case here just down here i'm going to add here case and inside this double quote i'm going to say degree map and specify here colon and specify here my second case i'm going to return here state now you can notice here i'm just returning the initial value of the state what i want when the action is equal to increment i want to increase the state value by 1. so right now as you can see here inside this state i have this count property let me just access it using dot count and i want to increase it by one i'm gonna say here plus one so when the increment action happen i want to increase the state by one the opposite of this i'm going to minus one from the state when the decrease action happen so here i'm gonna say state dot count minus one just sort of that if nothing match i'm gonna return the default value using the default case so i'm gonna say here default return stick i'm going to return the initial value this one now just out of that i'm going to use this function in my other files so let me just add here export default so i can use this function in my other files because when we create a store we need this function let me save this reducer and back to my index.js right here inside this index file i'm going to create a new store to create a store right here i'm going to say import in the curly braces i'm going to call a function create store from redux as you know i already have this package in my project in the previous lecture we install this package using this create store i'm gonna create a new store inside this application so just down here before this render method right here i'm gonna create a store so i'm going to say here constant store is equal to create store when you pass parenthesis here you can notice you will have to pass reducer here as a parameter so as you know we have this reducer here inside this reducer.js file let me just pass that so just down here i'm going to say import a reducer from in the single quote dot forward slash in the redux file i have reducer let me just use this function reducer inside my main file and pass this reducer as a parameter to this create store create store need reducer as a first parameter now just after that as you know in the context api we created a wrapper for the app to pass the value to the store we are going to do the same in the redux what i'm going to do is i'm going to simply add here a provider so i'm going to say here import in the curly braces i'm going to say provider is equal to provider from and in the single code i'm going to say redux react redux as you know using npm command we already installed this package in this project so i'm not going to install it again so using this provider component i'm going to wrap this counter so instead of this browser router i'm going to pass this provided here like this and just out of that i'm gonna pass here store like this i'm gonna create a wrapper to this counter using this provider component and this provider component have a property store and to the store property we pass our redux store this one now let me save this file and now what i want when i click on this button to this decrease button i want to decrease the counter value by 1 and when i click on this increase button i want to add one inside my state to do that as you can see here i have here the handler function inside this handler function i'm going to call here a dispatch method for now let me just print this keyboard back to the browser reload it let me just click on this counter you can notice here i have different properties to this counter component you can notice here i have context decrement and increment handler function property reference and state i want to first connect this component to the store to the redux store so i can access the store value to do that you need to call a connect function from the react redux so i'm going to just add here the import statement i'm going to say here import in the curly braces i'm going to say connect from in the single code i'm going to say react redux like this and just after that at the bottom here i'm going to simply say export default connect i'm going to pass your parenthesis and then i'm going to pass here parenthesis again because this is the higher order component connect is a higher order function which is a fancy way of saying it's return a function when you call it it's provide the connected component with a piece of data its needs from the store and the function it can use to dispatch action to the store the connect function has their own different parameters we will look at that later but just wanna just add here connect function to connect this component to the store so in the second parenthesis here i'm gonna pass my component let me just specify here counter like this and i'm going to remove this default export from this class because i just exported here my counter component so i don't need to export it again otherwise i will get an error message let me save this file reload the browser and click on this add button when i click on it you can notice here inside these props i have here a method called dispatch using this dispatch method you can change the value of the store redux is going to change the store value only when you call the dispatch method dispatch method is going to take an action as a parameter let me use it to update the store value so inside this handler function here let me just command this and here i'm going to say this dot pops as you can see i have these props here so just out of this props i'm going to say dot dispatch and i'm going to call here parenthesis and inside this parenthesis we need to pass an action so here i'm going to just pass here a simple object because as i said action is a simple javascript object so i'm going to see here object and say type and it is a type of increment i'm going to just copy this increment value this first case and pass that here so i'm going to pass here value to this type increment so when i call this increment this will call this dispatch method and this dispatch method is going to execute this first case because inside this action i'm going to have this increment type so this will just initialize this action with the type increment when i click on this increment handler function now just for that i'm going to do the same for this decrement as well let me copy it and specify that here and this time i'm not going to specify increment i'm going to specify here decrement when i click on this decrement function i'm going to execute this decrement action let me save this file reload the browser when i click on this button it will increase and decrease the value of the state but i'm not going to get any value inside this property because i'm going to have this state value inside this reducer i want to get this count value inside my counter component so just out of this component here i'm going to simply call function map state to props and i'm going to pass here parentheses this function takes the first parameter which is state and using this state parameter we can connect the reducer state with the property of the component so i'm going to say here return statement and i'm going to return an object as you can see here i have here count property let me pass that here i'm going to say here count and as a value i'm going to pass this state dot count inside this state i'm going to have this reducer state value right so i'm going to get that value and pass that to this property and just for that you need to pass this function to this connect the map state to prop is used for selecting the part of data from the store that the connected component needs a store is supposed to contain the entire state of your application for large application this could contain dozen of properties nested many layers tape it allows you to decouple your component and additional time which increase the modularity of your code and improves the application performance so i'm going to just copy this map state to props and pass that as a first parameter to this connect just like this you don't need to pass value to this state property because because the connect function will automatically pass the reducer state value to this function inside this handler function let me uncommand this console and when i click on this plus button you can notice here just down here inside my props i have here count property which is right now undefined when i click on this button i want to specify value to this count property so this function is going to create a property count and specify redux value to it let me just first print this state i'm using console.log here i'm going to say state back to the component and reload it as you can see i'm going to have here count zero when i click on this plus button you're gonna notice this will just return one i want the result something like this count zero so i can change my state value to do that inside my reducer as you can see here i'm just returning a simple value so instead of returning just a simple value i'm going to change the initial state of the count so here i'm going to call object and inside it i'm going to say count and to the value i'm going to see here state count plus 1 i'm going to do the same so i'm going to copy this statement paste it here and minus 1 decrease the value when the action is equal to decrease save this file now when i click on the plus button you can see it will return count 1 when i click on the plus button again it will return count two so i'm going to have what i want and you can notice here inside my component when i click on the plus button it's going to increase the value of the counter and when i click on the minus button it's going to minus the value of the counter let me remove this console message from here now as you can see my counter is completely ready so as you can see how to create a simple counter example of redux next we're going to simplify this example and see how to work with action now in this lecture we're going to understand how to work with action in the redux and simplify this counter example i'm going to use my previous example and show you how you can simplify it and also we are going to create a simple action and understand how action reducer and store work together so let's take a look at how to create an action first so as you can see i have here counter.js file which you created in the previous lecture and here i have a reducer so just out of that i'm going to create here an action so inside this redux folder right here i'm going to create a new file and name this file action.js here i'm going to create my action so i'm going to create here a comment and say redux action as i said action is nothing but a simple javascript object let me create an object here i'm going to say here constant increment is equal to and pass an object here and inside it i have a type which is increment and a payload and here i'm going to pass value 1 so this is the type of increment action and i'm going to pass a value 1 with this increment action as you know using payload we are going to change the state of the store we can pass value to the store using payload property and using type we are going to specify the action so this is the type of increment action now creating action like this will not allow you to pass value to the payload because here you can notice i'm going to specify hardcoded value share to the payload what if i want to pass this value from the counter component i need to call this object and then initialize this payload property this is not the best way to do it let me show you a better way to create an action instead of this object i'm going to create action creator so i can pass value to this payload so just down here i'm going to say constant increment is equal to and pass a function here an arrow function like this and i'm going to simply return an object and inside this object i'm going to pass both this value right now you can notice i have here hard coded so instead of this hard coded value i can just simply pass a value parameter and pass that here so when i call this increment i can pass value to this payload let me just comment this statement and just down here i'm going to copy this function and paste it here and instead of increment i'm going to say decrement and just out of that here the type is equal to decrement like this this is the increment action and this is the decrement action and just down here because we are using both these functions outside of this file i'm going to export it so just down here i'm going to say export instead of default i'm going to switch over here curly presses and say here increment comma decrement so i can access both these functions outside of this file let me save this file and back my reducer inside this reducer as i said when you click on the button it will initialize this action property for now let me just specify here console.log and let me see what we have inside this action parameter save this file redux will pass a random value inside this tag but when you click on the button you can notice this will just initialize your action with the type increment let me explain what is going on here when you click on the increment button react is going to call this increment handler function because as you know we have this handler function to this button when react will call this increment function inside that function i have a method called dispatch dispatch is a redux method using this dispatch method we are going to dispatch or we can say trigger an action you can notice as a parameter we pass here increment action so i'm going to just initialize this reducer action parameter using this statement so i'm going to pass your parameter type increment and initialize this action parameter so when i click on the increment button inside this type i have increment and this will just execute this first case now just out of that you can notice here i just specify here plus 1 and minus 1 inside this reducer this is the hard coded value right what if you want to pass these values from the component instead of passing these values here i'm going to pass these values from the component so what i'm going to do is inside this counter i'm going to pass here comma and pass another key which is payload and i'm going to pass value to it 1. save this file for now and back to the reducer save this file when i click on the plus button you can notice here i'm gonna have type increment and payload one so now when i click on the plus button it will initialize this action property with type increment and payload 1. so when i have my payload property with this action i can pass that payload inside this case so instead of this one i can just simply say here action dot payload like this reload the browser and when i click on this plus button you can see my app is working fine what if i want to increase the value by five so here inside my component i'm gonna simply pass here five let me save the changes back to the browser and reload it when i click on this plus button it will increase the counter value by five that's easy right just after that let me back to the reducer get rid of this console and just copy this action payload to this decrease action like this save this file and back to the counter and inside this counter to this decrement i'm gonna pass here comma and say payload 1 i'm going to decrease the counter value by 1 let me change this 5 to 1. now let me save the changes i will go to the browser and click on these buttons my app oops i think i misspelled here payload save this file and when i click on this button my app will work fine just out of that as you can notice here i'm creating my action inside these parameters instead of using this action file so i'm going to use this function and pass that inside this counter so just down here i'm going to say import inside the curly braces i'm going to say increment and decrement like this i'm gonna import these functions from action and just for that inside this increment i'm gonna say console.log and i'm gonna simply print my increment function i'm going to pass your increment and pass parenthesis to it and as you know to this parenthesis i have a parameter called value so when i call this function i need to pass a value to it so inside this counter if i see here four let me save this file and when i click on this plus button you can notice the increment function is going to return the type increment and payload four so now it's going to return an object with the type of action and a payload value i'm going to just simply use this function and pass that to this parameter like this and i want to increase the counter value by 1 so i'm going to specify here 1. let me get rid of this statement and i'm going to just call this decrement function and pass that here just like this and i'm going to decrease the value of the counter by 1. so i'm going to say here one save this file and when i click on this plus and minus you can notice my app will work completely fine so this is how you can create an action in redux so i hope you understand how to simplify your example of counter using action now in this lecture we're going to take a look at the different methods of the redux store we will look at how to work with this store methods in the redux application as you know when you create a store we pass a reducer as a parameter so the store can call a listener for the action store has its own methods with redux store you will get four methods get state dispatch subscribe and replace reducer so let's take a look at these methods one by one so let's start with the first one which is gate stat so let me first back to my previous example and here you can notice i have three files here counter action and reducer what i'm going to do is i'm going back to my index file and instead of creating my store inside this index file i'm going to create that in a dedicated file so inside my redux folder right here i'm gonna create a new file and name this file store.js and inside this file i'm gonna create my store so i'm gonna simply first import create store from redux down here i'm going to say constant store is equal to create store and pass reducer here as you know i don't have reducer inside this store let me import it so i'm going to copy import reducer from redux reducer so i'm going to just import reducer here so at the top i'm going to say import reducer from specify single code dot forward slash and then specify here reducer file just out of that i'm gonna just pass this reducer to this create store like this and at the end don't forget to export this store as a default export just like this so i can use the store in my index file save this file back to the index get it off this create store and this statement i can just simply say here import store in the single quote i'm going to specify redux and the store file like this so now i can use this door in my index file save this file you can notice the example will work fine so you can notice in the redux application i'm going to separate the store action and reducer this is always the best practice to create a dedicated file for the store action and reducer so once i've done that i'm going to just back to my counter and now let's talk about the methods of the store so inside my counter i'm going to first import my store so here i'm going to say import store from in the single code forward slash i'm going to just call my store like this just after this impulse statement here i'm gonna say console.log and print in the double quote initial state and then i'm gonna pass here comma and then see here store dot get state like this back to your component and as you can notice here i'm going to have the initial state of my component right now i have the initial state 3 so the get state method is going to return the current state tree of the application it is equal to the last value written by the store reducer so whenever you want to get the current value of your reducer or you can say of your store you can just call the store dot getstat if you want to get the current state you can use this getstate method just for that we have dispatch method as you know dispatch is an action dispatch method used to update the store dispatch method is going to take an action as a parameter and update the store value we already know that how to work with dispatch in the previous lecture just for that we have subscribe method so just down here let me create that method i'm going to say here store dot subscribe and in the parentheses this method take the function as an argument or you can call it a callback function so i'm going to pass here of callback function like this and inside it i'm going to say console.log and in the single code i'm going to say state after dispatch and then i'm going to specify here column grammar and say here store dot get state now if you want you can create this function outside of this subscribe method as well just for this example i just added here inline function and now the initial state of this counter is 0. when i click on this plus button you can notice i'm gonna get here a console message state after dispatch so whenever i call the dispatch method the subscribe method will automatically call this method is very interesting with this method you will get the listener as a parameter you can notice here we have this listener as a parameter whenever the action is dispatched we're going to get this method this method will be called anytime an action is dispatch and some part of the state tree may potentially have changed you can notice here i didn't call this subscribe method but when i click on this dispatch method i'm gonna get my subscribe method called now if you notice whenever i click on the increase or decrease redux will call this subscribe method redux will register this method and call whenever the action happen number one i want to unregister this method to do that we need to store this method in a variable so i'm going to say here constant and register is equal to that's upon you you can specify any name to this variable this is just for unregistering this subscribe method so what i'm doing inside this decrement right here i'm going to say on register and i'm going to just call here parentheses because subscribe is going to return a function so i'm going to pass here parenthesis let me save the changes and show you the result first let me reload the browser and click on this plus button whenever i click on this increment button this action will call the subscribe method but when i click on this decrease button this will first call the subscribe method and inside this decrement you can notice here i have this unregister function so after that so once you execute your own register and try to click on this decrease again this will not call the subscribe method again subscribe method is useful whenever you want to do something after the action happen whenever you execute the dispatch with an action that will call the subscribe method and to stop the subscribe method or you can say to unregister the subscribe method just pass this method to the variable and call it as a function and just for that at the end we have replace reducer replace reducer is a method to replace the reducer currently used by the store to calculate the state it is the advanced api so before understanding this method we need to know more about redux so we will look at this method later in this course now in this lecture we're going to learn how to create a redux store using a functional component we're going to create a simple example of redux application and create that example using a functional react component using functional react component it's super easy to create redux store you need to just use some react redux hook so let's take a look at how to create it i'm going to create a new folder inside this redux right here i'm going to create a new folder and name it functional so i'm going to say here fn example or you can say fn redux inside this app and redux i'm going to create a new file and name it example dot js so here inside this file i'm going to create my functional component so i'm going to say here react functional component and i'm going to just import that inside my main index file right here i'm going to just import that example like this get rid of this counter specify here fn redux and example now here inside this example inside the jsx i'm going to create two buttons so i'm going to say here button and inside it i'm going gonna say car and i'm gonna call here on click event like this just out of that just down here i'm gonna call h1 heading tag and inside this i'm gonna simply print a variable so i'm going to create here a variable counter v icon like this just for that i'm going to copy this button and paste it here again because i'm going to create two buttons here the second button i'm going to name is bike now what i want when i click on this first button i want to print it's a car and when i click on the second button i want to print it's a bike that's it that's a simple example we're going to create in this example but with using functional react component so just for that here inside this fn redux i'm going to create a new file and name it action.js as you know in the redux you need action let me close all these files and back to my action.js and here i'm going to create my action as you know we can create an action using a simple object or we can create a simple action creator now let me show you how to use object and create an action so just down here i'm going to say constant action types is equal to and in the curly braces i'm going to say car and in the double quote i'm gonna say car and here i'm gonna say bike and in the double quote i'm gonna say bye so as i said when i click on the first button i'm going to call an action car and when i click on the second button i want to call an action bike to solve that inside this f and redux i'm going to create my reducer so i'm going to create a new file for that and say reducer dot js so let's create a reducer so just down here i'm going to create a function with the name reducer that's upon you you can specify any name to this reducer function and then we need to pass two parameters here state and action and just for that i'm going to initialize this state with a default value so instead of creating a new variable for that i'm going to specify here equal to sign and in this object i'm going to specify vehicle and specify empty value to it so i'm going to just specify empty value to this vehicle key just like that inside this reducer i'm going to call here switch statement so i'm going to call here switch inside the parentheses i'm going to say action dot type then specify curly braces and here i'm going to create my first case as you can see here i have here an action car so i'm going to just use here car like this so when the car action happen i want to execute this first case and inside this case i'm going to simply return an object with rehiker key and the value is going to be it is a car that's it i'm going to do the same for the second case as well so i'm going to copy this paste it down here like this and instead of car here i'm going to say bike and i'm going to just change this value as well with my now as you can notice here i just use here hardcoded value instead of using this hard coded value i can use here action so inside the user i can just simply import action types from my action file like this and then instead of this hard coded value i can just simply pass action types dot car and here i can pass action type dot bye so i'm going to just pass these values to this reducer case just after that i'm going to say here export default reducer save this file and pass reducer as a parameter to the store instead of creating a new file for the store i can use this same store this one i'm going to use this file store and use the same code but instead of using this reducer i'm going to use this example reducer so instead of this reducer i'm going to pass here fn redux and pass my reducer i'm going to pass this reducer to this store save this file as you know i already have this store inside this index file right here so i don't need to import it again to start that open your example.js and now inside this example.js file i'm going to connect this component to my store in the class component we know that using connect function we connected the component with the redux store you don't have to do it in a functional component in the functional component if you want to use the redux store you just need to add some hooks so at the top here i'm going to say import and inside the curly braces i'm going to pass some hooks from react redux so inside these curly braces i'm going to simply say use selector so i'm going to just call here hook use selector and just down here inside my example i'm going to say here use selector and as a parameter i'm going to pass here a callback function so i can access the reducer state so this hook is going to return the reducer value when you pass a callback function to it so inside this parenthesis i'm going to pass here state and pass an arrow here like this and i'm going to return state so this function is going to get the current state from the reducer and pass that to the variable and return it so let me just get that returned value inside a variable i'm going to say here constant counter is equal to so i'm going to get the current reducer value inside this counter variable you can notice here i already have this counter variable inside this h1 heading tag use selector allows you to extract the data from the redux store use selector will also subscribe to the detect store and run your selector whenever the action is dispatched this hook takes the state parameter and using it you can access the state of the current store so you can notice here we pass here parameter state and return that parameter so i can access the reducer state so once i have my reducer state i'm going to just call vehicle property of it you can notice here we just initialize this vehicle property here in this initial value of the reducer i'm going to use that here and just for this use selector i'm going to use another hook called use dispatch and just out of that here i'm going to say constant dispatch is equal to use dispatch and then pass your parenthesis that's it and i'm going to use this dispatch method to dispatch an action dispatch is a hook refers to the dispatch function from the redux store in the previous lecture we understand how to use dispatch method with a class component it's just like you call the dispatch method in the class component but with a functional reference here we just call the same dispatch method reference and we call that reference inside this dispatch variable let me just call this dispatch inside this on click event when i click on this button i want to dispatch an event so inside this on click i'm gonna call here a function a callback function like this and inside it i'm going to say dispatch and call parentheses to it as you know to this dispatch we need to pass an action as a parameter so inside this parenthesis here i'm going to pass an object and say here type and i'm going to call here an action of the type car so i'm going to copy this action and pass that here so when i click on this button i'm gonna execute the car type action i just saw that here inside this bike inside this on click event i'm gonna call the callback function and call dispatch method again and as a parameter here i'm going to pass here an object and call action type so i'm going to say here type and this will type of bike action so i'm going to pass here type now just out of that let me show you what we have inside this counter variable so let me print it down here console.log counter save this file save all your files now when you reload your browser you will get an error message cannot create a property vehicle of undefined i'm going to need this message because i don't have any value inside this vehicle variable because inside the reducer you can notice i just added here two cases what about the default case i need to pass the default value to this vehicle when both these cases failed so just down here don't forget to add default and inside it i'm going to return recycle nothing back to your browser you can notice i'm going to get the default value here inside this state now let me show you what happened when i click on this button when i click on the car i'm going to get it's a car and when i click on this bike button i'm going to get it's a bike so that's simple right i'm going to get all that messages inside the console as well so inside this counter i'm going to get all the values of the current state so the use selector is going to return the current state of the store and we are going to use use dispatch hook to dispatch an action so i hope you understand this simple example using the use selector and use dispatch hook so i hope you understand how to work with use selector and use dispatch hook in the functional react component now in this lecture we're going to learn what is combined reducer of redux we're going to understand how to use combined reducer helper function of the redux in the react application so let's see what is combined reducer function is the combined reducer helper function turns an object those values are different reducing functions into a single reducing function you can pass to create store as your app grows more complex you'll want to split your reducing functions into separate functions each managing independent parts of your state in the combined reducer function you pass the different reducers the resulting reducer call every child reducer and gather their result into a single state object the state produced by the combined reducer function name space the state of each reducer under their keys as passed to the combined reducers let me explain what this means just take a look at this combined reducer method here i'm going to create a root reducer and i'm going to pass combined reducer helper function to it and inside of parentheses i'm going to pass two reducer functions here first is a 2d reducer and second is a counter reducer i'm going to pass both this reducer function as an object so the combined reducer function will grab both this reducer function and create a single state object this segment will produce a single state object just like this and inside both this object we have different properties you can use es6 property shorthand notation as well to create this for example if you use combined reducer and if you pass counter and tools like this then this is equivalent now let me create a very simple example to show you how you can use combined reducer in the redux application so what i'm going to do is i'm going to simply create a new folder for this example so inside this redux right here i'm going to create a new folder and name it combine reducer example so i'm going to say cr example inside this combined reducer example i'm going to create a new file for the example and i'm going to name it combine dot js just for that let me create here a functional component react functional component and let me import this file in my index so i'm going back to my index file right here get rid of this path and right now i'm gonna import combined reducer example combine file let me get it off let me copy my combine here i'm going to paste my combine component like this i'm going to leave the store as it is because i'm not going to create a new file for the store instead i'm going to use this store file for that so inside this combined reducer example i'm going to create another file for the reducer so i'm going to say here reducer dot js so what i'm going to do is inside my combine here i'm going to create three buttons i'm going to use my first button to add the to-do list second button is used for increment and third button is used for decrement so here i'm going to create h1 heading tag and say combine reducers just down here i'm going to create a button and name this button add just down here i'm going to duplicate this button change this text and here i'm going to say increment and this became decrement as well as don't forget to add on click event to all these buttons like this so i'm going to add here on click event to all these buttons just for that i'm going back to my reducer and here i'm going to create two different reducers first for the tools and second for the counter so to create a reducer as you know we start with the function keyword and specify the reducer name i'm going to say here to those inside the reducer we have two parameters state and action i'm going to initialize this state with an empty array so i'm going to specify here equal to sign and specify here an empty array just for that inside this i'm gonna add here switch statement and inside this parenthesis i'm gonna say action.type and in the curly braces i'm gonna create my first case inside my first case in this double quote i'm gonna say add to do just start that inside this first case i'm going to return state dot concat and then i'm going to concat the value with action payload so inside this array right here i'm going to add my to-do so i'm going to pass that out of here and inside it i'm going to say action dot payload i'm going to get the value from the component just like that just down here i'm going to add here default and i'm going to return state the initial state of this reducer so this is my first to do reducer just down here i'm going to create my second reducer so i'm going to say here function counter pass your state and action parameter to this state i'm going to specify initial value which is 0 just down here i'm going to say switch in the parenthesis i'm going to say action dot type and inside it i'm gonna create my first case so i'm gonna say here case increment and in the first case i'm gonna say return state plus one in the second case in the single quote decrement and if the action is equal to decrement i'm going to return state minus 1. don't forget to add here default case so i'm going to say here default and return a simple state just like this so as you can see here we have two reducers now what i'm going to do is i'm going to add this reducer to my store let me save this file and back to my store.js file right here i'm going to add my reducer so i'm going to first add my file here so here i'm going to say dot forward slash cr example and add here reducer file from this reducer file i'm going to export this to do and this counter so let me just add here export statement export to lose and export counter save this file back to the store and as you know we can access both these functions inside a curly braces i'm going to pass your curly braces so here to do's and counter like this just after that you don't need to pass both these functions to this parameter instead you need to create here a variable so i'm going to say here constant reducer is equal to and here you need to call combine reducer function you can notice here when i call this combined reducer this will automatically import in this curly braces so when you want to use combined reducer you need to first import it using redux module so once you import that inside this parenthesis just pass an object pass here my first reducer to those and the second reducer which is counter like this just down here inside this store i'm gonna pass this reducer this one just like this now let me save this file and back to my combined.js file inside this file let me first import some redex we already know that how to import the redox hooks so i'm going to say here curly braces and i'm going to specify hooks from react redux and i'm going to import use selector and use dispatch hooks i'm going to use both these hooks inside this example so i'm going to first import that and just start this combine right here inside this function i'm going to say constant counter is equal to you can specify any name to this variable that doesn't matter and specify here use selector and in the parenthesis as you know this will return a state so i'm going to say here state specify an arrow and return a simple state we all know how to use this use selector we already learned that in the previous lecture just for that i'm going to say here constant dispatch is equal to and then specify here use dispatch hook like this let me just console this counter so you'll understand what is happening just down here don't forget to call a dispatch method so when i click on the button i'm going to change the store so inside this on click in the first on click right here i'm going to call an arrow function and specify here dispatch and inside this parenthesis i'm going to pass my action the action is a type of add to and as you know we're going to get the values from the user you can notice here we have the payload property as well let me pass that here so i'm going to say here payload and inside the payload i'm going to pass add to those i'm going to add another dispatch method so i'm going to say here arrow call the dispatch method like this and pass my action type so i'm going to say here type and it is a type of increment so i'm going to say here increment and just down here i'm going to add another arrow function with the dispatch method and in the parenthesis i'm going to specify type and it is a type of like this now i'm going to save this file you can notice here when i reload the browser i'm going to have your combined reducer title and i'm going to get here three buttons i had to do increment and decrement you know that i have two reducer for this example you can notice here the initial state of this counter is something look like this i have the to-do key and i'm gonna initialize it with empty array and then i'm gonna have counter with the initial value of zero when i click on this add to those this will just initialize this array and inside this array i have add to those and the counter is still zero because i did not dispatch any event of the counter reducer when i click on the increment this will call the counter reducer and you'll have the one value inside your counter let me click on the increment again this will increase the value of the counter by one and i'm gonna have to do as it is let me click on the decrement this will decrease the value of the counter by one and when i click on the add to do again it's going to add the to-do inside this array you can notice here so basically the combined reducer is going to combine two reducer and create a single object i have 2ds reducer and a counter reducer both are working together using combined reducer helper function practice with this example to understand how to work with combined reducer next we're going to see how to use apply middleware helper function now in this lecture we're going to understand how to work with apply middleware helper function in the redux we're going to see the different features of using helper functions and we will see how to use this apply middleware helper function in the react application one of the more interesting concept in redux is to include the custom middleware functions to the dispatch method of your store so what is a middleware function is redux multiplayer functions provide a medium to interact with dispatch action before they reach to the reducer each middleware receives the stored dispatch so that they can dispatch a new action so that they can access the current state and return a function the common use case for middleware is to support asynchronous actions isn't it interesting it is so let's see how to work with middleware functions in the redux application so let me just back to my previous example and then show you how you can work with middleware functions so i'm going back to my store.js file and inside this file i'm going to create my middleware that's upon you you can create a dedicated file for that as well just for now i'm going to create a new function for the reducer so just after this reducer right here i'm going to create a new function so i'm going to say here constant i'm going to name this middleware lock middleware that's upon you you can specify any name to this middleware this is just a function when you create a middleware you are nesting a functions you are creating a function inside another functions so to create a middleware you have to start with the function i am going to use your arrow function just like this and this function is going to take first argument which is store this function nest another function or you can say inside this function we have another function so i'm going to call here parenthesis and the arrow again like this so inside this function i have this function this is what we call a function nesting inside this parenthesis we can get the next parameter inside the second function i have another function by specifying parenthesis and an arrow just like this now you can notice here here i have three functions inside the first function we have the store parameter inside the second function we have next parameter and inside this third function we have the action parameter now this is the syntax of the middleware now let me show you what we have inside these parameters so just down here inside this middleware function i'm going to simply say console.log and inside it i'm going to print previous state and i'm going to just specify here comma call the store dot get state as you know we have gives that method to the store object so i'm going to just access that specify here colon and just down here i'm going to pass next and pass here action parameter now just for that what you need to do is you need to pass this middleware function as a second argument to this create store instead of just passing this function you need to call here another helper function which is apply middleware so i'm going to say here constant middleware called i'm going to create here a constant variable that's upon you you can specify any name to this variable here i'm going to call a method called apply middleware like this now when i add this method you can notice vs code will automatically import that method in this currently process so when you want to use this method you need to first import that once you import that using the redux module you need to just pass your parentheses and pass your middleware here i'm going to pass here log middleware like this so now once you apply your middleware function just call this variable and the second argument to this create store function just like this now save this file and try to execute it now you can notice when i reload the browser i'm going to get my previous example console message let me just remove this message right from here save this file reload the browser and now when you click on any of these buttons when you dispatch your action middleware will automatically call so when i click on this add to those middleware will automatically call and you can notice here i'm going to get my previous date here when i click on this increment you can notice here this will return my previous date using just a simple get state i'm going to get the previous value of my store now what is the meaning of this next action calling next continues propagation of the current action it's important to not alter the action and call it once and only once within a middleware that is why we pass here next and pass action to it what if i call this console after this next function like this let me show you what happened if i do it reload the browser and click on this studios you can notice right now i'm not gonna get my previous date instead this is my current state so when you access your state after this next function you will get your current state and before this next function you will get your previous date just take that in your account let me show you what we have inside this action get rid of this complete statement and specify here action reload the browser and click on this to do you can notice this will simply print my action the type of action is add to do and i'm going to have here payload and todos using the store parameter we can get the current store value using the next we're going to get the previous and the next value of the store using this next function we can access the previous and the current state value the another use of this next function is to pass this middleware action to the next middleware for example let's say you have multiple middlewares in your redux application this next function is going to pass this action to your next middleware function and you can pass all your middleware functions to this apply middleware function you are not limited to only pass one or two middleware functions to this apply middleware now this is the simple syntax of this middleware now the next question comes in when to use this middleware function adding middleware gives us a place to intercept action and run a side effect before or after an action occurs now let me show the execution of the redux store when you click on the button it will first capture the event and then dispatch the action once the action is dispatched redux will call this middleware after that once the middleware is executed just after this middleware edx will call this reducer reducer creates a new state from the change prescribed by the action and then update the store and after that the new state is passed to the react application using properties now i hope you understand how to create a syntax of the middleware in the redux application don't worry i'm going to create a simple application in the redux and show you how you can use the middleware inside it now in this lecture we're going to learn how to use the bind action creator helper function in the redux application normally we should just call a dispatch directly on our store instance if you use redux with react react redux will provide you with a dispatch function so you can call it directly too the only use case for binding action creator is when you want to pass some action creators down to a component that isn't aware of redux let me show you how to use this bind action creator helper function in the redux application i'm going to use my previous example to understand how this helper function work so i'm going to use this reducer and this combined file but before that i'm going to create my action file so i'm going to create a new file here and say here action.js inside this file i'm going to create my action so i'm going to say here export function add to i'm going to create action creator here like this and i'm going to pass here parameter text just for that this action creator is going to return an object and i'm going to specify action type which is add to do and then here i'm going to pass text just for that let me copy this function and paste it here and i'm going to change this function to remove to do inside this text i'm going to specify id and i'm going to change this type as well i'm going to say here remo todo and i'm going to change this text to id just like this just out of that i'm going back to my reducer inside my reducer i have here a to-do's function inside this this function i'm gonna have here a case add to do you can notice here inside my action i have my first action add to do what you need to do is you need to create a remove to do inside your reducer right here you need to create a second case of remote url that is the exercise for you i'm going to leave this as it is and back to my combined.js file inside this file let me just get rid of this functional component and now i'm going to create here a class component so here i'm going to say react class component and then i'm going to get it off this import statement just sort of that let me just export this combine using the connector so let me first connect this class to the store let me get it off the export statement and just down here i'm going to say export default and then i'm going to specify connect inside the second parenthesis i'm going to specify my component so i'm going to say here combine like this so once i connect my class i can access the dispatch method using this class so inside this class i'm going to create a constructor like this with super method and i'm going to pass here props just down here inside this constructor i'm gonna get the dispatch function so i'm gonna say here constant using curly braces i'm gonna say here dispatch is equal to props so this will just get the dispatch method from this combined component just down here i'm going to call the component lifecycle hook which is component date mount i'm going to just call this and dispatch method inside it like this this time i need to pass here this because without this keyword i can't access the properties of this component and now just for that i'm going to use bind action creator function so at the top let me first import that function so i'm going to say here import in the curly braces i'm going to say from redux and from this redux module i'm going to import bind action creator just out of that i need my actions as well so i'm going to say here import star as to do action creator and i'm going to say here from in the single code i'm going to specify my action file like this so from my action i'm going to import all my export functions and store that in this object so i can access all my functions one by one using this object just for that inside this constructor here i'm going to set this dot bound action creator is equal to and then i'm going to call here bind action creator helper function and inside these parentheses you need to pass your action and the dispatch method as you know we have the action here this one to do action creator i'm gonna pass that here so i'm gonna say here to do action creator like this and as a second argument you need to pass dispatch method so as you can see here i have here a dispatch method let me just pass that here dispatch now using this statement i just mind the action with the dispatch method now just out of that let me just print i'm going to say here console.log bound action creator like this just down here inside this component did mount here i can just simply say let action is equal to to do action creators dot add to do and i'm going to just pass here a text called use redux i'm going to pass value to this text parameter just after that once i have my action i'm going to pass that to the dispatch method so i'm going to say here dispatch and inside the parentheses i'm going to say here action just like this that's it and now just down here let me just print to those so i'm going to say here let in the curly braces i'm going to say to lose this dot props so from my component props i'm going to get the to-do's property right now i don't have this property because i did not specify any function inside this connect we need to first get the reducer state and then specify that state to the component property to do that in the previous lectures we created a function called map state to props i'm going to do the same here but instead of creating a new function i'm going to create an inline function here so inside this parentheses i'm going to first create a parameter state specify an arrow and inside this parenthesis i'm going to return i'm going to create a property to dose and specify state dot dots so this will just create a property inside this component let me just print this to those just down here i'm going to say console.log and print back to my component and reload it as you can see inside my component this will first print my action creator you can notice here inside my action creator i have add to do and remove to do just for that it will print the empty array and then print the action type now let me just leave everything as it is let me specify here command now this is the bind action creator function and when the component is mounted i'm going to get this add action event now let me remove this bound action creator and just print this keyword and you can notice i have here a component inside it i have different properties and inside these properties you can notice i have here bound action creators this property is going to return two functions add to do and remove the row along with that inside properties you have your dispatch method so you can dispatch any action now here what if you want to create a component that is not aware of redux and you don't want to pass a dispatch or redux store to that component in that case you can pass this bound action creator property as well as your props to the child component so the child component can access the dispatch and your redux action for example let's say you want to pass your action and the dispatch method to your child component in that case you just need to call your component for example let's say i have here a component called to-do list and to this component i'm gonna simply pass dispatch property and then i'm gonna say here this dot props dot dispatch just like this so this will just pass this dispatch method to the child component and just out of that you can just simply pass your curly braces and pass spread operator like this and then here you can say this dot bound action creator so now when you create your to-do list you can access the dispatch method as well as your action creator now i hope you understand how to work with bound action creator helper function in redux next i'm going to show you how to work with redux toolkit now in this lecture we're going to learn how to work with a redux toolkit redux toolkit is a standard way to write the redux application logic redux toolkit contains packages and functions that we can think are essential for building a redux app redux toolkit built in our suggested best practices simplifies most redux tasks prevent common mistakes and makes it easier to write redux application redux toolkit makes it easier to write good redux application and speed up development the redux toolkit was originally created to help address three common concepts configuring a redux store save us from importing lots of packages to do anything useful and the third concern is redux requires too much boilerplate code so redux toolkit will solve these common problems so let me just create a simple example to explain how you can use redux toolkit in your react application so what i'm going to do is i'm going to first open my terminal let me just stop my development server clear the screen and then i'm going to install the redux toolkit it's toolkit is not built in so you need to first install it in your react application so i'm going to say here npm iphone install and then i'm gonna say add redux js forward slash toolkit let me install this in my application so i'm gonna press enter now once i have this package let me clear the screen start the development server again let me close this and now i'm going to create a new folder for this redux toolkit inside this redux i'm going to create a new folder and name it toolkit and inside this toolkit i'm going to create a simple example to understand how to create a redux toolkit i'm going to first create a new file and name this file store.js to create a store in redux toolkit you need to first import the redux js toolkit so to do that you need to first simply say here import statement and in the curly braces you need to just import the function called configure store from at the date redux js toolkit so from this package you need to import a function called configure store and using the store we're going to create the redux store so just down here i'm going to say here export default and then i'm going to say here configure store and in the parenthesis i'm going to pass an object and here this configure store is going to take a reducer as a parameter so i'm going to say here reducer and here you need to pass your reducer in this object for now i'm going to leave this as it is and inside curly braces you need to pass your reducer i don't have my reducer so let me create a new reducer so let me save this file close all these unwanted files from here like this and inside this toolkit i'm going to create a new file and name it reducer dot gs and just out of that i'm going to create another file here inside this toolkit and name it counter dot js inside this counter file i'm going to create a simple example of counter instead of writing the same code again and again in every example let me copy my previous code and specify that here now let me explain this component i'm going to first create a counter function inside this function i'm going to use the hook call use selector and use dispatch you all know how to work with both these hooks just for that inside this jsx i'm going to create two buttons first for the increment and second for the decrement and inside this parenthesis i'm going to call action so as you can notice here i'm going to call here reducer and inside this reducer i have these functions this increment this decrement and this select count when working with redux and redux toolkit your component will be same but the difference is your store and your register will be different you can notice here inside the store i use here configure store function to initialize my store or you can say to create a store just out of that let me back to the reducer and create a new reducer inside this application to create a reducer you need to call a function create slice from the redux toolkit so at the top i'm going to say import from and then i'm going to specify redux toolkit and from this package you need to import create slice function and using this function i'm going to create a reducer this function allows us to easily create a reducer for the redux application let me show you how we can use this function just down here i'm going to say export constant slice is equal to and i'm going to call here create slice and in the parenthesis as an object i'm gonna pass on different properties here you need to first specify the name for this slice so you need to call here a property called name that's upon you you can specify any name to this slice i'm going to specify here counter you may have multiple slice in your react application so you need to uniquely identify all your slice that is why you need to specify here name for your slice just for that here i'm going to create a reducer so you have a property to this create slice which is reducers and to this reducer property you need to pass an object so to create a reducer inside this redux toolkit you need to first create here a key i'm going to say here increment and then specify a function to it so i'm going to say here function i'm going to pass here arrow function just like this and now just for that to this parenthesis i'm going to pass state the initial value of your store you can notice here i don't have any initial value to my store i need to first specify it so as you know when we create a store we need to pass state and action parameter but when you work with redux toolkit you don't have state and action parameter so to specify value to your redux store you can access a property called initial state and you can specify value to it so i'm going to simply pass here curly braces and say here value zero so this is the initial value of my store that's upon you you can specify any value to this initial state just for that inside this increment here i'm gonna say state dot value and i'm gonna specify plus equal to sign and specify one here because when i click on the button i want to increase the state by one just sort of that here i'm going to specify comma and create my second case inside my second case i'm going to say decrement and then i'm going to specify value to it so i'm going to pass here a function a callback function so instead of parenthesis i can simply say here state pass an arrow and inside these curly braces i can say state dot value minus equal to 1 so this is decrease 1 from the state your reducer is now successfully created this is a combination of action creator and a reducer this is the action creator and inside it i have a reducer so now once you specify your reducer to this slice you have a property called actions and to that actions you have all these actions so to get that action you can just simply call here constant in the curly braces you can say increment decrement is equal to slice dot actions so from the actions parameter you can access both these functions and then if you want you can export your action using export keyword just for that at the end you need to export the reducer as well this reducer object so at the end just down here i'm going to say export default slice dot reducer so now you can pass this reducer to your store let me save this file back to the store and let me first import and i'm going to specify here counter reducer from in the single code i'm going to specify reducer so once i have my reducer i can pass that to this reducer object like this so now your store is now successfully configured let me save this file back to the reducer save this file as well and back to your counter inside my counter component i just imported the reducer file and from this file i imported three functions increment decrement and select count we already created the increment and the decrement action let me create this function and i'm going to show you what is the use of this function after a few seconds let me first create it and just up here i'm going to say export count is equal to and then i'm going to specify here state and then i'm going to simply return a state let me first show you the result i'm going to say here console.log and i'm going to print here state save this file back to your index.js and let me just import counter here instead of this combine i'm going to say here counter from redux token from the toolkit i need this counter component just for that let me just import my store as well get rid of this specify the toolkit and my store file i'm going to get here counter reducer and inside it i have here a value let me just access it so here i'm going to say dot counter reducer when i wrote the browser you can notice i'm going to have value 0. so here i'm going to say dot value so i can easily access my state value using this function so instead of this console.log i'm going to simply return this state value save this file back to the counter.js save this file as well when i reload the browser you can notice i'm going to have here my counter when i click on the plus button it will increase the counter value when i click on the decrease button it will decrease the counter value now let me explain this component here i'm going to just import the actions the increment and decrement and pass that to the dispatch method so i can easily call my actions just for that i'm going to use use selector and call a state and using this select count function i'm going to create a property called value and specify a state to it a reducer state using this function i'm going to specify value to the property of the component and then i'm going to access that property and specify that here inside my span tag so whenever you use redux toolkit you just need to update your reducer and your store practice with this code to understand how it works now in this lecture we're going to learn more about connect function of the redux we all know how the connect function is useful to connect the react component with the redux store we all know that the connect function is going to connect the react component with the redux store in this lecture we're going to talk about the connect function parameters the connect function has two important parameters first is a map state to props and second is a path dispatch to props let's see how to use these functions to create a redux application i'm going to use my previous example to show you how you can use both these functions so i'm going to open my vg studio code editor and inside it inside the zdex folder i have my previous files here reducer counter action and store i'm going to open my counter.js file and inside this file you can notice here i have map state to props function we already know how to create these functions in the previous lectures now let me explain what is the use of this function you know that i'm going to use this function to create a property inside the component i'm going to create a count property inside this counter component and specify the redux value to it this function is going to take a parameter call state this state is going to return the current state of the store if i try to print this component using constructor if i create here a constructor like this with super props and if i say here console.log and if i print this component then you can notice here inside this component inside of properties i have here a property called count this function is going to create a count property in my component and specify state value to it if i create here console.log then i'm gonna get that state in my console this is my initial state of the store so using this state parameter you can access the state and specify your current state to your component property so whenever you pass a new value to the state it will change the property value of your component you are not limited to only specify map state to props name to this function instead you can pass any name to this function this is just for reference for example if i remove this map from this function and if i change this function into es6 like this if i remove this function specify your constant state to props is equal to remove these parentheses and add here an arrow now this is the type of es6 function now this is also valid function in redux let me just pause this function here like this as you can see your example will work fine so using this function you can get the reducer value and pass that to your component property so this is the first parameter of this connect function now let's talk about the second parameter of this connect function to the second parameter you can pass a function called map dispatch to prop functions map dispatch to props function is the second parameter to the connect function and this function either be an object or a function or not supplied if you don't want to supply this function as a second parameter to this connect that's completely fine because because in your component you can access the dispatch method when you use connect function to connect your component you will have a dispatch method with it now using map dispatch to prop function we can work with the dispatch actions let me show you how here i'm going to create a function so i'm going to say here constant map dispatch to props now you're free to specify any name to this function that's upon you and i'm gonna specify here parameter call dispatch and pass here a function like this inside this function i'm gonna return an object so i'm gonna say here return and pass here object and inside this object i'm going to pass my dispatch methods what i'm going to do is i'm going to create here a key call increment and specify a dispatch method to it so i'm going to pass here a function and add a function like this and call dispatch method so i'm going to access this parameter value here dispatch and pass parenthesis and inside this parenthesis as you know i have here increment and decrement action i'm going to pass both these actions inside this parenthesis but just now let me just add here hard coded action so i'm going to specify here object and specify type it is a type of increment and then specify here comma and pass payload payload is going to be 1. if i open my action you can notice here i'm going to specify type increment and payload is going to be this value so i'm going to pass here payload 1 for now and type is going to be increment let me create my second key i'm going to pass your comma copy this complete statement and paste it here and instead of increment this time i'm going to say here decrement and let me just add a suffix to both these functions here i'm gonna say increment props and this became decrement props instead of increment i'm gonna just use this decrement action type right here and just for that i'm gonna pass this map dispatch to props function as a second argument to this connect function here i'm gonna pass this function map dispatch to prompts back to my component and reload it when i reload my browser and open my component you can notice here inside my props here i have two methods so this function is going to create two methods inside my component with dispatch method now let me just use both these methods inside my component you know that inside my component i have here increment and decrement handler functions you know that we just passed that functions or you can say methods to this on click event now let me just comment both these functions and i'm going to access this decrement and this increment method so just down here i'm going to say this dot props dot decrement and this became this props dot increment and then i'm going to change these methods as you know we have increment props and decrement props so i'm going to say here decrement props and this became increment props when i click on this plus button you can notice this will just call the increment action with the payload 1. so as you can see here i don't need to create any handler function inside my component using this function we can simply pass the dispatch methods to the component as a properties so basically map state to props method is going to create a property and pass the current state to your component and we're going to pass this function as a first parameter to the connect the second parameter is the map dispatch to props and using this function we can call a dispatch action you can notice here we just created two methods inside my component so when you pass this function as a second parameter to the connect redux will create both these methods inside your component so you can call your dispatch methods so i hope you understand both these functions clearly practice with it to understand how to work with both these functions now in this lecture we're going to learn how to work with immutable states so let me first explain what is the meaning of immutable changing the existing object or array called mutation and on the other hand the value that cannot be changed is called immutable immutable means something that cannot be changed you all know we can update and change the object and array values in javascript but there are some rules when working with pure functions to change object or array as you know reducer is a pure function and in order to change your object or array you must follow these rules a pure function must always return the same value when giving the same input a pure function must not have any side effect so if you change the initial state of your store without making a copy of it then that is the side effect of your pure reducer function if you are using redux you need to know how to modify your state immutably without changing it so let me show you how can properly change the state of your redux store so i'm going to just back to my counter and here i'm going to change few things let me first get rid of this unsubscribe method from here like this i'm going to first change this spawn tag so instead of spawn here i'm going to call a paragraph and pass your user name i'm going to call here prompts and to this browse i'm going to create a property called user and then i'm going to access the value of the key name just out of that just down here instead of count as you know i have here user property so i'm going to specify here user and just down here instead of calling the type increment i'm going to call here the type of action called add on and i'm not going to specify any payload here so i'm going to remove this and comment this second method like this i'm going to save this file and back to my reducer i'm going to change few things here as well i'm going to change this initial state so instead of this initial state i'm going to just specify here user and specify an object inside this object i'm going to specify id1 and name of the user so i'm going to say here name snow and just after that i don't have this action type increment so i'm going to get rid of this increment and say here add on let me just add here a command because i'm not using this decrement action and just out of that i'm going to get rid of this return statement and here i'm going to say console.log and print the state and just down here i'm going to say return and then i'm going to say here state equal to and then i'm going to pass here object user and then i'm going to specify an object here i'm going to add the second user so i'm going to say here id 2 and name is going to be daily so when i click on the button i'm going to call this add-on action and update the state and i'm going to get here error cannot read property name of undefined let me just back my example and right here yeah i just added here count property instead of count i'm going to say here user so now when i reload the browser you can notice i'm going to have here snow as a result and when i open my console you can notice here i have here user the initial state with the id1 and name is going to be snow when i click on this plus button this is going to update my state and i'm going to have here id 2 and name is going to be daily this will update the ui as well but you can notice i just specify here equal to sign to update the state this is the illegal way in redux to specify value to your state by default this will mutate the state so to solve this problem you have to create a new object and specify your previous date to it and then return a new state so to do that i'm going to get rid of this statement because this is illegal in redux and here i'm going to pass an object and this object is going to return my previous state so i'm going to say here state and i'm going to just pass here spirit operator and just out of that specify here comma and then i'm going to say here user and then specify id is going to be 2 and name is going to be daily save this file and click on this plus button again you can notice this will do the same thing but this time this is the legal way to change the state of the redux we are going to just use the previous state and return a new state using this reducer and if you want to add this second user inside the state you can change this object key if i just specify here user 2 save this file and when i click on this plus button you can notice i'm going to have here two objects user 1 and user 2. this will just add this value in my previous state the critical rule of immutable update is that you must make a copy of every level of nesting that needs to be updated when you use this technique to make a copy of your state this becomes harder when the data is nested so to solve this problem you can use the object assign method so instead of this statement i can just simply say here object dot assign i'm going to use assign method of the object and this method is going to take the first parameter which is the targeted object for now i'm going to specify here empty object so this assign method is going to create an empty object inside that i'm going to first specify my initial state and then i'm going to pass my updated value so as a third argument i'm going to specify an object here and say here user 2 and then specify id 2 and name is going to be daily back to your component and reload it when i click on this button you can notice i'm gonna have the same result this will create two objects here so using this statement you can access your previous state as well as your new state this method is going to create an object specify your previous state to it and specify a new state to it so using this technique you can access your previous state as well as your current state so keep in mind when working with object in the redux make sure you use this object assign method to update the value of the redux store so keep in mind when working with pure function like reducer make sure you use object assign method to update the value of the state so keep in mind this is the immutable rule of redux practice with this code to understand it clearly in this lecture we're going to learn what is redux thunk and how to use it in the redux application many times when building a web application you will need to call an api which means some asynchronous action is going on redux run is a middleware that does these asynchronous actions with redux redux by itself does not allow asynchronous actions redux thunk is a middleweight library for readers redux middleware is a code that intercepts actions coming into the store while the dispatch method redux funds return a inner function and the inner function receives the store methods dispatch and gate state as a parameter now for example let's say you create action creator and inside that you call an api you all know api may take some time to get the data from the server in that case you have to make your application asynchronous the thunk can be used to delay the dispatch of an action or to dispatch only if a certain condition is met let me show you a very simple example to understand how to work with redux thunk library so i'm gonna just simply first install this library in my redux application because redux thing is not inbuilt so i'm gonna open my terminal let me first stop my development server and here i'm gonna say npm i for install redux when i press enter this will install the redux thunk library inside my project once i have this library let me clear the screen and call npm start to start the development server and just for that let me just back to my store.js and create a new example here so let me get it off all this code from here and here i'm going to first import the create store and apply middleware functions and just out of that just down here i'm going to first create a variable initial store and specify initial value to it so i'm going to say here x is equal to 1. so i'm going to pass value to this x property just out of that i'm going to create a reducer function inside this store if you want you can create a dedicated file for the reducer function as well that's upon you but just for this example i'm going to put here reducer function so i'm going to say here constant reducer is equal to and specify an arrow function here and as you know it is a function have two parameters first is a state and second is a action i'm going to initialize the state with the initial value of this constant variable inside this reducer i'm going to create here switch case so i'm going to say here switch and in the parenthesis i'm going to say action dot tie and in the curly braces i'm going to create my first case so inside this switch case i'm going to create my first guest so i'm going to say here case increment when the action is equal to increment i'm going to just increase the value of the x by 1. just for that let me add my second case so just down here i'm going to add my second case like this so if the action is equal to decrement i'm going to just minus 1 from this state so just down here i'm going to paste my third case like this so here i'm going to say if the action is equal to reset then i'm going to specify one value to the state and just for that at the bottom right here i can just simply specify default case so i'm going to say here default return state like this so this is my simple reducer for the counter example just for that just down here i'm going to simply call constant store is equal to create store and inside it as you know we need to first pass the reducer so i'm going to say here reducer as a first parameter and in the second parameter i'm going to pass my middleware so in this lecture we are working on redux thunk so i'm going to say here apply middleware and inside this parenthesis i'm going to pass the thunk library so at the top let me first import the thunk library here so i'm going to say here import thunk from and in the single code i'm going to say redux thunk and i'm going to specify this function this thunk function inside this apply middleware like this and just sort of that don't forget to export your store back to your index.js and here i'm going to leave everything as it is just after that i'm going to open my counter.js and here i'm going to change few things so what i'm going to do is inside my counter let me just get rid of these commands and inside this render statement i'm going to just copy some jsx and paste it here like this so i'm going to create here three buttons first for the decrement second for the increment and third for the reset now here you go notice when i click on this first button i'm going to call the handler function decrement when i click on the second button i'm going to call the increment and when i click on this third button i'm going to call the reset handler function so what i'm going to do is i'm going to use my map state to props function as well as my map dispatch to props function to pass these values so as you know to pass property to the component we can use map state to props so instead of these state to props i'm going to change this function name for the reference and i'm going to say here map state to props is equal to pass state to it let me get rid of this console and just for that i'm going to return x property with the value of x so i'm going to just create a property x inside my component and pass state x value as you know inside my store you can notice i have here x initial state to the store i'm going to access that store value and specified to this component property and just for that inside this map dispatch to props i'm going to create dispatch events so i'm going to first return the increment even so instead of this increment props i'm going to change this to increment like this and pass handler function and to this handler function i'm going to pass dispatch method and pass action type increment i have this action type increment inside my reducer so i'm going to call here increment and just for that i'm going to call here decrement and reset functions the map dispatch to props method is going to pass all these three handler methods to this component so i can access all these methods using my properties so let me just copy first this function and pass that here and as you know i already have this function as a second argument to this connect i'm going to leave everything as it is back to my component save it and here you can notice inside my constructor i'm going to first print my component i'm going to just back to my browser and reload it and you can notice here just down here inside my counter example inside my props here i'm going to have few properties decrement increment recent and x the initial value of the x is one right now let me access all these properties and specify that so just down here inside my render statement i'm gonna simply create here a constant variable and i'm gonna just destructure all these properties so i'm gonna say here equal to sign this dot drops you can notice my example is working fine when i click on the plus button it will increase the counter value and when i click on the minus button it will decrease the counter value and when i click on the reset it will reset the counter value to 1. now let's suppose when you click on this plus button you want to get the value from the api and increase the value of the counter when you get the value from the api it will make some delay in the execution to handle this asynchronous behavior of the action we need to make action in the redux thunk structure so let me show you how to create a thunk function in the redux application thunk function is just like action creator for example let's say here i just specify the hard-coded action let me create here action creator so if i create here a function increment and specify here return type increment then this is what we call the action creator if you want to can put this function in a dedicated file as well as an action creator for this example i'm going to leave this as it is and this is what we call the action creator and i'm going to specify this function inside this dispatch parenthesis like this the thumb function is similar to this action creator but the thumb function is not going to return an object instead it will return the function let me show you just down here i'm going to create the thunk function or you can say a thunk middleware function so here i'm going to create a function i'm going to name it increment async that's upon you you can name anything to this function as i said thunk function is going to return a function so i'm going to just see here an arrow function and this function is going to take a dispatch method as an argument so i'm going to say here dispatch like this and just for that inside this function you can access your dispatch method so for example you just make the api call here and the api is going to make a request and get the response after two seconds so i'm not gonna make here api call instead i'm gonna call here set timeout function so to mimic the api i'm gonna call here set timeout function so i'm going to just say here set timeout and inside these parentheses i'm going to pass here callback function like this and as a second argument i'm going to pass the timeout value so i'm going to say here two seconds so i'm going to pass 2000 here and inside this parenthesis here i'm going to say this patch i'm going to call this a dispatch parameter right here like this and inside it i'm going to call my action just like this that's it your thumb function is completely ready now you just have to use this function inside this dispatch so here i'm going to say increment sync when i click on this plus button you can notice it's going to update the counter value after two seconds now what if i click on this increment and suddenly click on this decrement let me show you if i click on this increment and suddenly click on this decrement you can notice the increment sync is going to get the current value of the store so practice with this code to understand it more clearly if you want to know more about redux thunk just head on to redux thunk github repository and here you can find more about this library so i hope you understand how to work asynchronously in the redux application next we're going to see a similar library of redux which is redux saga now in this lecture we are going to learn another useful library which is redux saga so what is the use of this library this library manage the redux side effect redux saga is similar to redux thunk but there are some difference between both these libraries if you want me to make a tutorial on it you can just comment me below redux sagas are implemented using generator functions we all know to create a generator in javascript we first specify the function keyword followed by the asterisk that defines the generator function generators are function that can be exit and later be re-entered the generator functions body is executed until the first yield expression which specify the value to be returned from the iterator so let me show you a very simple example to understand how to work with redux saga in the redux application so i'm going to open a new tab and insert it i'm going to head on to reduxsaga.js.org and from this website you can get the redux library so just click on this get started and install the redux saga in your project so i'm going back to my project and open my terminal stop the development server clear the screen and here i'm going to say npm install redux saga let me install this library inside my project now once i install it let me clear the screen and start my development server again let me just back to my previous example and show you how you can work with redux saga so to understand redux saga you need to first back to your store and inside it you need to first import the create saga middleware so at the top here you just need to first import create saga middleware from redux saga i'm going to call create saga middleware so from the redux sangha library i'm going to import create saga middleware so once i import this function just down here before there is create store at the top i'm going to create the saga middleware so to do that you just need to say here constant and create a simple variable here so i'm going to just simply specify name to this variable which is saga middleware is equal to and you need to call this function create saga middleware like this and just for that you need to just specify this saga middleware inside this apply middleware parenthesis so let me just copy this saga middleware variable and pass that here and just after that you need to run this saga generator so to do that just after this create store make sure you execute the generator after this statement once you call your create store you can run the saga generator so just down here i'm going to say saga middleware dot run i'm going to call the method of saga middleware which is run and inside it i'm going to call my middleware so to create the saga middleware i'm going to create a new file for that so inside this redux folder right here i'm going to create a new file and name this sagas.js and inside this file i'm going to create a middleware so to create a middleware function you just need to first start with the function keyword and pass asterisk to it because we are going to create a generator saga library work with generators so i'm going to create here a generator and specify name to it i'm going to specify name watch increment async that's upon you you can name anything to this function let me just pass here export statement and use this function inside my store like this let me first import this file at the top so here i'm going to say import in the curly braces i'm going to say watch increment sync from and specify my file path just out of that i'm going to save this file back to my sarcas file inside this file let me create my action creator so at the top here i'm going to say action creator and just up here i'm going to create a function so i'm going to say here function and as you know this is the generator so i'm going to pass asterisk here and pass a name to it i'm going to say here increment a sync now what i'm going to do is i'm going to add here say timeout function to make some delay so at the top here i'm going to say constant delay is equal to call here a function like this with parameter ms means millisecond and then i'm going to say here new promise i'm going to return a promise object with this function and i'm going to say here response promise is going to take a response as a parameter so i'm going to say here response set timeout and inside this set timeout i'm gonna pass response and millisecond just out of that here inside this increment i'm gonna pass yield delay and i'm gonna pass millisecond here to 1000 so this so this statement will execute this function after two second this yield keyword is used in javascript to pause and resume the generator function so once the generator execute this function after two seconds it will call its second statement so just after this first statement i'm going to call here my second statement so i'm going to say here yield and here i'm going to call the saga effect in saga there are some effect you can use when working with saga library so at the top i'm going to say import in the curly braces i'm going to say put specify comma and say here take every from in the single quote i'm going to say redux saga from the redux saga i'm going to get both these effects from the effect directory so i'm going to pass here redux saga effect and then i'm going to pass this boot right here so i'm going to say here put in the parentheses i'm going to pass my action so i'm going to say here type and it is a type of increment now put is one example of what we call an effect effect our plain javascript object which contains instruction to be fulfilled by the middleware when a middleware retrieves the effect yielded by the saga the saga is pauses until the effect will fulfill there are different effects in saga put is one of them just after that we have here take every effect i'm going to use that inside this watch increment sync function so you can notice here i'm going to have here my action creator and inside this watch increment sync i'm going to call this action creator and create a new action so inside this function i'm going to say yield take every i'm going to call an effect of saga the take every is a helper function provided by redux saga to listen for dispatch action and run your action every time or you can say and run your action each time so inside this parenthesis inside a single code i'm going to say increment or sync i'm going to create here an action increment using and to this action i'm going to pass action creator increment async this one so what i'm going to do is here i'm going to create a new action call increment sync and now just for that i'm going to save all the changes back to my counter and insert it you can notice here i have here increment async as a dispatch action creator let me get rid of it and here instead of increment sync i'm going to say here increment so i'm going to just simply pass this type increment to this increment method and as you know inside my sagas here i have increment sync action i'm going to pass that to this action type so i'm going to just copy this increment async and pass that to this type like this let me save this file when i click on this plus button you will notice after 2 seconds you can notice counter will update its value by one let me click on the increase button again you can notice after two second counter will update its value so this example is now completely asynchronous so now whenever you get the value from the api call you don't have to worry about anything your example is now asynchronous so i hope you understand two different ways to make your redux application asynchronous in the previous lecture we understand how to work with redux thunk and in this lecture we understand how to work with redux saga so i hope you understand both these lectures clearly if you want to know more about redux saga comment me below i will make more videos on it now from this lecture i'm going to show you how to create a simple redux application in react until now we all know how to work with redux but let me show you how you can use the reader in the react application so i'm going to create a simple project inside my visual studio code editor and show you who can work with redux application so let me just create a new project inside my application folder so here inside my mon series i'm going to open my terminal and inside my terminal you can notice i'm in my mind series folder inside that i'm going to create a new react project so to create a new react project i'm going to say npx create react app and then i'm going to name this application redux app when i press enter this command will create react application in this directory so this command will create a simple react application once we have the react application let me first cd and enter into my redux app so once i enter into my redux application let me just start the development server so i'm going to say here npm start so this command will simply start the development server of react just for that let me close this terminal and let me open my redux app here i'm gonna have a few folders what i'm gonna do is inside this source folder i'm gonna create few folders so let me just click on this new folder icon and i'm going to first create here a folder name redux store inside this redux store i'm going to store all my redux files just for that inside this source i'm going to add another folder with the name components and inside these components i'm going to put all my components just out of that inside this redux store i'm going to create three sub folders first for the actions second for the reducer and third for the store so inside this action i'm gonna put all my action files inside this reducer i'm gonna put all my reducer files and inside this store i'm gonna have my redux store now when your app grows you will have more than one reducer and more than one action so i'm gonna separate both these files using directories let me create my action creator so inside this action i'm gonna create a new file and i'm gonna name it index.js that's upon you you can name anything to this file inside this file i'm going to create my action creators so what i'm going to do is i'm going to say here constant add to do success is equal to i'm going to pass here to parameter and pass an arrow here like this and inside this function i'm going to pass object so i'm going to just return an object with this function let me first add here a command to indicate this is the action creator so inside this object i'm going to first specify the type so i'm going to specify here type in the capital letters so i'm going to say here add to do success just start that i'm going to specify payload and it is a type of object so i'm going to pass here object and pass here to do this parameter name so when i call this add to success i'm going to pass this value to this action just sort of that let me create my second action so just for that here i'm going to say constant add to do started is equal to and then i'm going to pass here an arrow function inside it i'm going to pass type and it is a type of add to do started now i want to return this object so i need to wrap it inside this parenthesis like this just for that let me create my last action so i'm going to say here constant add to do failure is equal to specify here error as a parameter and pass a function here and inside it i am going to return an object inside this function i am going to say type this is a type of action and this is the add to do failure type of action then i'm going to pass here payload it is going to be an object and pass here my error parameter error now when creating an action creator you need to take care of this action type when you pass this action type you need to specify the exact name of this action type in the reducer so let me show you how to simplify this statement what i'm going to do is i'm going to create the action types in a separate files so inside this action i'm going to create a new file and specify name for this file types.js and insert it i'm going to export all my actions so here i'm going to simply say export constant and specific name of my actions for example inside this index here i have add to the success let me copy it specify that here so this is now a variable and to this variable i'm going to pass value and to do success back to my action creator copy this ad to do started printing by that here using export keyword export constant and to do started is equal to and in the double code i'm going to pass and to do started at the last here i have had to do failure let me copy it specify here export constant add to the failure and in the double quote i'm going to say add to do failure so now i can access all these three constant variables here in my action creator instead of passing these values so at the top i'm going to just simply say import in the curly braces here i'm going to import all this action types so let me just first specify here from specify single code and specify here types and from these types i'm gonna first add add two to success then i'm gonna add add to do started and then i'm gonna add add to do failure or you can just simplify this import statement i'm gonna just get rid of all these types right from here and here i can say import star as action types so i'm going to just import all my variables and create action type object and store all my variables inside that so i can just simply access my all variables using this object so instead of these hard coded value here i can simply say action types add to do success just down here i can just simply specify i had to restart it like this here i'm going to say action types dot add to do started and just down here i can just specify action type dot add to do failure that's easy right now let's see how to create a reducer for this project now let me show you how to create a reducer for this project so inside this reducer folder right here i'm going to create a new file and name this file todos reducer.js that's upon you you can name anything to this reducer file inside this reducer file i'm going to first initialize the initial state so i'm going to say here a command initial state and then i'm going to specify constant variable with variable name initial state is equal to then specify an object inside this object i have to loose and this is a type of array so i'm going to pass empty add here just out of that here i'm going to say export default function and then i'm going to pass name to this function which is to-do's reducer and as you know with reducer you will get two parameters state and action i'm going to pass both that and let me first initialize the state variable with the initial value so i'm going to say here state is equal to initial value inside this totals reducer let me create a switch case so i'm going to say here switch inside it i'm going to say action.type and inside this curly braces i'm going to create my different cases so let me first create my first case here i'm going to say case and here i'm going to pass my action types you all know we have a dedicated file for the action types let me use that here so let me open my tools reducer at the top i'm going to say import star as action types from and in the single quote double dot forward slash to locate the action folder and then i'm going to specify types file name like this and here in this case i can simply say action types dot and then i'm gonna specify my action type here you can notice i can access my constant variable here so i'm gonna first access this started variable action type started so i'm going to say here action type dot add to started and this is my first case so i'm going to specify here colon and inside this case i'm going to return an object i'm going to return the previous state so i'm going to specify here spirit operator with a state variable now let me just pass a few more properties to this initial state instead of just to do's i can simply create here a property called loading and this is right now false i can change the value of this loading to true when the action add to do started so just down here i'm going to specify comma and then i'm going to say here loading is equal to true so when this action happen i'm going to change this loading value to true just out of that let me create my second case just down here i'm going to create here a case specify action types dot to do success and to this to do success i'm going to return object and insert this object i'm going to first return my previous state like this and then i'm going to return loading false so what i'm going to do is when i call add to start it i'm going to return the initial state when i call the action add to success i'm going to return the initial state as well as change the loading value to false and i'm going to specify here to those and inside an array i'm going to pass my state so just down here i'm going to say triple dot spread operator specify here state then specify dot to those and then we have this property in this initial state let me just access it so just out of that i'm going to specify your comma and say here action dot payload so when i call this action i can get this payload value and i'm going to pass that to this to this oops i think i misspell the dot here like this just sort of that let me create my third case here and this is the action types dot add failure specify colon and here i'm going to return an object with the previous state so i'm going to pass here previous state like this and then i'm going to return the loading it's going to be false and as well as with this state i'm going to return an error message so let me add this error property inside my initial state here i'm going to say error and specify initial value no don't forget to add comma here and just down here i'm going to say error and pass action dot payload dot error now when i call this action i'm going to pass my action payload error value to this state error property now let me save this file and create a store for this reducer so i'm going to create a new file inside the store and name this file store.js and now let me create a new store here so to create a store i'm gonna first import the create store function so i'm gonna say here import create store from in the single code i'm gonna specify redux but as you know i don't have this redux package in my application so before we import this function from this package i need to first install this package in my project so let me first open my terminal stop this development server and here i'm going to say npm i for install and install redux as well as i'm going to install react redux this package is going to help us to add provider and provide the store to all my react components just for that we also need react tank we all know how to work with react thunk in the previous lecture now let me just click on enter and install all these three packages in my project once i have all these city packages in my project i can use it let me first start my development server like this and now if i specify here redux then i can access my redux package here like this just down here i'm going to create a command and say create store as you know to create a store you need to create a constant variable store and pass a function create store or you can just export this create store as well that's upon you so i'm going to say here create store and inside it i'm going to pass my reducer as a first parameter as you know i don't have reducer inside this file so let me first import that so i'm going to secure import todos reducer from specified single code double dot to locate this reducer folder and then i'm going to specify to those reducer let me use this status reducer right here as a first parameter and just out of that i'm going to export default store back to your main index file so let me minimize everything back to my index file and right now this application is rendering this app component let me change it and create my own component inside it so inside the source folder here inside this component i'm going to create a new file and name this file to do creator dot js and i'm going to specify here a simple functional component so i'm going to say here react functional component inside it i'm going to say h2 heading tag and i'm going to say here to do redux application save this file back to the index and let me first import my component here i'm gonna first say here import statement and i'm gonna first import my to-do creator from i'm gonna specify the component folder that i'm gonna specify to do creator let me specify this component right here just out of that let me just add a provider here at the top i'm gonna say import in the curly braces i'm going to say provider from and as you know we have the provider in react redux module i'm going to specify that here and inside of this react stick mode i can just simply pause here provider just like this and at the end let me add my store here from in the single code i'm going to specify the direct store inside it i have the store file so i'm going to say here a property store is equal to and then i'm going to pass this store variable save all my files now at the last i need to connect this to creator to the store so i'm going to just back to my component to do creator let me show you the properties of these components to get the properties of your functional component you need to pass here props parameter and using it you can access all the properties of this component so i'm going to say here console.log and i'm going to print all the properties so i'm going to say here props let me go to the browser and you can notice here inside it i don't have any property to this component let me connect this component to the store and add a dispatch method as well as some other properties so i'm going to just add here connect function and connect this component to the store instead of adding the connect function just down here i'm going to create a dedicated file for that because with connect function you can pass two parameters map state to props and map dispatch to props i'm going to use both that functions so instead of creating a connect function here i'm going to create a new file for that so inside my store here i'm going to create a new file and name it container.js i'm going to just simply say export default and i'm going to just export the connect function as you can see when i pass here connect visuals to record will automatically add the import statement at the top right now i'm not going to pass anything so i'm going to leave this parenthesis as it is and inside the second parameter i'm going to pass my to-do creator so let me first import that component here so i'm going to see here import to do creator from in the single code double dot forward slash let's specify my component folder inside it i have to do creator let me pause that as a second parameter right here save this file and just back to your main index file right here and instead of this doodle creator i'm going to just get this to do creator from the container right from here so let me get it off this component file specify here redux store specify store folder and container like this save this file back to your project and reload it you can notice when i reload i'm going to have the dispatch method i can access now the dispatch method of the store so this is how you can work with different files in the redux application next we're going to create a thunk middleware for this application now let's take a look at how to create redux thunk middleware in this application so what we need to do is we need to first back to the store you all know we already installed the redux package in this project in the previous lecture so i'm not gonna install it again if you don't have if you don't have redux thunk in your project just head on to your terminal and type npm i for install and then specify redux tank this command will install this redux tank package in your project at the top let me first import the redux tank so here i'm going to first create a command and say redux tank as you know we use redux and to create asynchronous actions so i'm going to say here import i'm going to specify here redux tank so in the single code here i'm going to say redux tank and i'm going to install a package from the redux which is tank and i'm going to pass this redux tank as a second parameter to this create store as a second parameter here i'm going to pass a middleware as you know we can pass a middleware using applyway delaware function so at the top inside this create store i'm going to first import the apply middleware function and pass that here so i'm going to say apply middleware and in the parenthesis of this apply middle pair i'm going to specify here my thunk library now i can create any asynchronous middleware in this application let me save this file and back to my index.js inside my action folder right here you can notice i have three actions here let me create thunk middleware at the top so at the top here i'm going to create a thunk middleware so i'm going to say here at todo tank middleware so here i'm going to first create a function so i'm going to say here export constant function and i'm going to specify name to this function and to do and just specify the arrow function here inside this function as you know thunk middleware is going to return a function so i'm going to say here return and i'm going to return here a function with the parameter dispatch with the thunk middleware you can access dispatch parameter so here i'm going to say dispatch and call an arrow function here like this now using this function i can execute any dispatch action so i'm going to simply say here dispatch and in this parenthesis i can call this action creators so inside this parenthesis i'm going to call this add to do start it oops i think i misspelled here started let me copy this function name paste it here and just call this action here so when the application started i'm going to first call this add to do started action now let me save this middleware and pass this middleware to the component so i'm gonna first save this file and back to my container.js right here continue.js inside the store folder here i'm to create two functions and i'm going to pass that to this connect function as you know to this connect function we can pass two parameter map state to props and map dispatch to props so at the top i'm going to create both these functions let me first leave everything as it is and show you the properties of this to-do creator i'm going to just back to my browser and when i reload it you can notice i'm going to have a message cannot call class as a function whoops i think i misspelled something in my program let me back to my project and let me open the index.js let me open the container store yeah right here i just misspelled the package name as soon as i installed the wrong package inside this project i used to do this type of mistake so let me just get it off this package from here let me check my package.json file inside it here i'm gonna have a package called react thunk instead of this we need redux thumb so let me uninstall this package from this project and install the redux thing inside this project let me open a terminal stop the development server and here i'm going to say npm uninstall and i'm going to uninstall this react thing package so here i'm going to say react tank and instead of react tank i'm gonna install i'm gonna say npm iphone install and i'm gonna install here redux tank this is the correct package let me close this file and you can notice here i have a redux thumb package in my package.json let me use it let me close this package.json and inside this store right here i'm going to say redux tank save this file open my terminal and start my development server as you will notice i'm gonna have here my title and inside my console i'm gonna have the properties of this component what i want inside this container right here i'm gonna pass two functions to this connect and pass properties to this to do creator component so just down here i'm gonna create here first a component map state to props so just down here i'm gonna say constant map state to props is equal to specify state and pass a function here inside it i'm going to return an object with to do ski and pass state to it just after that i'm going to pass this function as a first argument to this connect function just like this map state to props just down here i'm going to create another function called map dispatch to props so i'm going to say here constant map dispatch to props is equal to dispatch as you know with this function we're going to get the dispatch parameter so i'm going to call that and return a simple object inside this object i can simply create a property for the component so i'm going to say here on add to do and pass a function here a callback function so when i call this key i'm going to call this function inside this function i'm going to simply call this patch and in the parenthesis i'm going to call my to do add middleware as you know we have this to do add middleware inside my index file here you can notice inside this action index file i have here add to let me just use this middleware inside my container so here at the top i'm going to say import i'm going to say here in the curly braces add to do from and in the single code i'm going to say triple dot forward slash action and specify index file as you know in the index file we just exported this add to the so i'm going to access that inside this container just for that let me pass this function inside this dispatch just like this just after that let me pass this function as a second argument to this connect back to my component and reload it you can notice here i'm gonna have few properties to this component i'm gonna have on add to do and to lose state right now the value of this state is undefined because in the reducer we did not specify the default case so i'm going to just back to my project and open the two rules reducer and you'll notice here i don't have here a default case so just after this case this last case right down here i'm going to create my default case so i'm going to say here default and down here i'm going to return a simple state back to my browser and reload it you can notice now i have my state so inside this to do creator component i'm going to have on add to do function as well as i'm going to have to do's state so i can access my store value using this property to do's and call the dispatch method using this on add to function let me show you how to do it so what i want i want to call this function or you can say this dispatch method when i click on the button i'm going back to my to-do creator and here i'm going to create a button so just out of this h2 heading tag here i'm going to create a division tag and inside it i'm going to create a button to this button i'm going to specify name change action or you can specify any name to this button that's upon you and here i'm going to create on click event and pass the handler function as you know i don't have handler function here so let me create that at the top i'm going to say constant on click happen is equal to and pass an arrow function here inside this as you know we have this on to do method we can access this onto the method with the properties so here i'm going to say props dot on add to do like this just for that i'm going to specify this on click happen to this on click event like this back to my browser and reload it when i click on the change action button it will call this on add to do middleware function and as you know inside this middleware function we have this dispatch so when you call the change action it will call this middleware function and call the add to do started action you can notice here inside your reducer you just return the initial state and you change the value of this loading to true the initial value of this loading is false but when you click on the change action it will change the loading value to true you can notice here and when you click on the change action it will change the loading value to true and rest of the properties are same because we did not change anything inside that now if you want you can call here use effect hook and call this on to do inside that that's upon you now i hope you understand how to create a simple redux middleware next we're going to implement this middleware and we're going to make the api call inside this middleware now once you understand how to create this simple middleware inside your application let me show you how to make api call using this middleware as you know when you call an api you need to make sure your application is asynchronous otherwise you will get an error messages because api call will take some time to return the response from the server so to call the api in this javascript project i'm going to just call here a library called xcos so let me first install that library inside this project so i'm going to open my terminal stop the development server and here i'm going to say npm i for install and i'm going to install xjos library xjos is a library that help us to make http requests to the external resources in our react application we often need to retrieve data from the external apis so it can be displayed in our web pages so we're going to use this library to call the apis from the external resources and now inside this middleware i'm going to create my api call so just order this i have to do started just down here i'm going to call xcos library now to call this library you need to first import that at the top so here i'm going to say import exist from exos library so just down here i'm going to call the exist library and with this library you will get different http request so i'm going to first call here post method exist dot post so this method is going to make post request to the api inside this parentheses you need to first specify the url then specify the data and that will return the response as a promise so as a first argument here in this single code i'm gonna pass the api url so what i'm gonna do is i'm going to open my browser and here i'm going to open a new tab and search for json placeholder and from this json placeholder fake api testing tool i'm going to call the api inside my project to know more about this api just head on to jsonplaceholder.typeycode.com so i'm going to just click on the guide and import this api inside my project as you can notice here to use this api you can use the fetch function as well if you want you can use the fetch function to face the data from this api that's upon you i'm using the exeos library here so just down here you can notice here we have the create a resource section inside this section we have here the api to make a post request let me use this api so let me copy this url and i'm going back to my project and inside this single quote here i'm going to paste that url the post request url i'm going to pass your comma and pass the second parameter and as a second parameter right here we need to pass the data with this post request to post some data inside this api so here i'm going to pass an object and inside this object i'm going to specify first title 4 then i'm going to specify here body which is bar this is just the values you can specify any value here and then specify here user id is going to be 1. now once i have my post values here just out of that just out of this second parameter right here after these parentheses just down here i'm gonna pass here dot and call then method i hope you know when working with promises to get the values from the api or you can say to get the values from the promise you need to call then method so inside this 10 method i'm going to pass callback function so i'm going to say here response and call a callback function here inside this parenthesis i'm gonna have the response of this pose request so just down here i'm gonna say console.log and i'm gonna print here response dot data so using data parameter i can access the response data of this action just of that just out of this then down here i can call the catch i can call the catch here catch method and pass the error so if there is any problem inside this request i'm gonna call this catch method and inside it i'm going to say console.log and print the error message like this let me save this file and just sort that when i click on this change action you can notice this will return the posted data in the console you will notice here let me reload the browser and show you the result again when i click on this change action after a few seconds api will return the output and i'm gonna have that output inside my console when i click on the change action you can notice after a few second api is going to return the response to our application and i'm going to have here the output value now if you want you can pass this value to your action creator and store this value inside your state so what i'm going to do is i'm going to just back to the index.js right here inside this action and here instead of this console messages i'm going to get rid of these console messages and here i'm going to call a dispatch method as you know we are in this middleware function so i can access this dispatch method inside this promises as well so here i'm going to say dispatch and as a parameter i'm going to pass here add to do success the action and as you know to this add to do success we have a parameter called dodo i'm going to pass this response.data to this parameter like this so this will just store this data in the store just for that instead of this console.log here i'm going to call dispatch method with the action add to do failure like this and in the parenthesis as you know i have here error parameter with the payload so i'm going to pass here error message let me save this file back to my component first and let me print my current state here so at the top i'm going to say here import in the currently process i'm going to call you selector from react redux from this library i'm going to call here use selector function so this function is going to get the current state of the store so instead of these properties i'm going to say here constant to those is equal to use selector and this is going to return a parameter called state and i'm going to return that parameter like this to this doodles and just down here i'm going to just print console.log studios save this file now this will just first print the initial state of the store when i click on the change action you can notice i'm gonna have here a value inside my to-do's you can notice here inside my tools i'm going to have my api call value so i'm going to just make the post request to the api and get the output from that api and i'm going to store that value in the store keep in mind inside this inside this middleware this api call is not actually going to store all these values inside this api this is just a fake api so it will not actually going to store all these values inside this api instead it will just make the mimic of it and now once you have your values inside your store you can print all these values inside your redux application so next we'll see how to do that now we all know how to work with redux thunk middleware and work with apis using this application we use the redux tank middleware to make the api call when we click on the action i'm going to post the data in the api and get the response from that api now once we get the response from the api let me show you how to print that in your application so let me just back to my visual studio code editor and here you can notice i have here a console statement inside that i have here to lose variable inside these two rules i have this state object inside this object we have error loading and to do's array inside these two rules right now i don't have anything but when i click on this change action i'm going to have value inside these two doors you can notice here inside the surus i have one to do with title body user id and id i'm going to post this data in the api and get the response back from the api and then i'm going to store that data in the store what i want i want to get this data from the store and display that right here in my application so what i'm going to do is just out of this title i'm going to print all that data i'm going to simply first create here a division tag and inside that i'm going to create h3 heading tag inside this h3 heading tag as you know we have here a variable called two rows i'm going to just call that here and inside that as you can notice here i have to do sk now let me just change the variable name here instead of doodles i'm going to say here container that will make sense let me just change this container let me just change the variable name and inside this variable i have a state and inside that i have to do's key inside these two doors on zero index i have turkey so what i'm going to do is i'm going to just iterate over the studios using map function and display all these data so just here i'm going to call a method of array which is map this function is going to iterate over an array so here inside this parenthesis i'm going to pass a callback function here and inside this callback function i'm going to pass parameter so for now i'm going to specify here t for todos and inside this function i'm going to say spawn and inside this pawn tag right here inside this curly braces i'm going to say t dot to do dot title as you can notice here inside this array i have this to do key and i'm going to access this title key value let me save the changes back to my browser oops i'm not going to get anything here because we need to return this value instead of just specifying that inside this function so instead of these curly braces i'm going to pass here parenthesis just like this as you can notice i'm going to have your foo as a response in the console you will notice i'm going to have here a warning each child in the list should have unique key you all know how to work with this warning because in the previous lectures we understand how to solve this warning let me refresh that again and show you how you can solve this warning so what i'm going to do is i'm going to just grab these curly braces right from here cut that and paste that just after this h2 heading tag right here and inside this right here i'm going to create this div and h3 heading tag and inside this function right here i'm going to get rid of the spawn tag and use my division and h3 heading tag so inside this map function right here i'm going to create a division tag and inside this i'm going to create h3 heading tag and what i'm going to do is i'm going to specify key to this division tag and i'm going to specify curly braces here inside this curly braces i'm going to get the index value of this to do you can notice here inside your to-do's you will get this index value this is right now zero i'm going to pass this value right here so as a second argument to this map here i'm going to specify i i for index you can specify any name to both these parameters that's upon you inside this key as a value i'm going to specify i the index value to uniquely identify this division tag and inside this h3 heading tag here i'm going to pass curly braces specified t for to-do's and then i'm going to say to do dot title and reload my browser just sort of that when i click on this change action you can notice i'm not going to get any warning here i'm going to get response what i want now instead of it creating over this array inside this return statement you can create a function for that or you can create a variable and return all the values of your jsx to that variable and print that variable for a practice put this statement inside a separate component and call that component here and print all your api values now let me show you how you can create a variable and store all your j6 value inside it and using that variable i'm going to print all my data let me show you what i want to say at the top before this return statement here i'm going to create a variable called constant list items is equal to and then i'm going to pass this statement just like this instead of this curly braces and just sort of that this statement is going to return this title with this division type and then what we need to do is we need to just copy this variable and inside this curly braces you need to just print that variable reload the browser and try to click on the action button so this is easy approach to get the value from the array just for that if you want you can get the different values of your to-do inside this division tag for example if i want to get the value of body i can just simply specify here body key then if i want to get the value of id i can specify here id back to my browser and as you can see i'm gonna have the title body and the id of the to-do list so this variable is going to hold all these values and print that in the jfx now if you want you can style all this section using css file for example let's say you want to center this title you can simply create a css file for that let me import the css file here i'm going to say import in a single code i'm going to specify double dot forward slash and then i'm going to specify app.css i'm going to import this app.css file we already have this file in this project i'm going to use that here and inside this file i have few classes i'm going to use this app class inside my project here i'm going to say class name is equal to and in the double quote i'm going to say here as you can see this will just center this due to redux application title so if you want you can style your application using the css file or you can create a dedicated file for this component and style your application now i hope you understand how basically the redux application works you

Channel: Daily Tuition

Views: 3,215

Keywords: Complete Redux Tutorial For the React Developer - [2021], redux store, redux complete tutorial, working with redux tutorial, what is redux, how to use redux in react, react redux, react redux tutorial, tutorial of redux, redux tutorial, redux for the react user, redux to the beginner, working with redux, redux complete tutorial for react user, react js redux, redux for react user, thunk middleware, thunk, redux saga tutorial

Id: Xcimt18kkEA

Length: 167min 43sec (10063 seconds)

Published: Mon Jul 05 2021