Redux in React Native in 1 hour - ReactNativeTutorial.net

alright hello everyone and welcome to my tutorial on react native and Redux the storia has been a long way underway I'm so sorry for all of you who have subscribed to me early and has been waiting a long time for this tutorial maybe you're already Redux experts by now I've been actually recording the whole course already on my laptop but in the end I scrapped that after I did it because I thought the sound was too bad now I'm using a external microphone on my smartphone that seems to give the best results I've tried to use a headset and well I had this use with my smartphone microphone of course and tried different locations but now I'm gonna do the course finally so let's go on to the contents I will look at what I'm going to show you the contents of this little mini course is going to be first I will talk about what is there problems that redux is trying to solve why do we need it what is it what does it consist of what is the components inside redux the basic data flow using redux then we will jump into our tutorial which is a simple counter I will show you right here what I mean so this is the final project that we will have in the end this is a a simple counter where you can increment and decrement and cure it and enter your own number and this is all done using our own Redux actions and our own Redux reducers so this is not using the component state inside vanilla react and we will make another we will make another actions file and we will also have another reducer so we'll be using multiple reducers and we will import the actions and use them and our reducer and so on inside of our component so but we will go through this step by step and build it up gradually so you will not be introduced to too many concepts at one time so hopefully this the pace I'm doing it in will make sense to you and gradually introduce you to the redux concept so let's get on to talking about what is redox and why would you use it okay so why use redox at all why not just be content and happy that we have vanilla react data flow and just pass our state from a container state at the top level onto all of our components with our big apps but at some point the app you have or developing on is gonna grow too big and too complex that it is it's not gonna be manageable with the vanilla react data flow at least that's my pin my experience that's one of the reasons you might want to use Redux is simply that the vanilla react data flow is gonna be too complex with a large app when you see Redux data or the redox framework you're gonna also have a similar structure that other developers can look at and recognize and start working more the sooner on it then if you had your own weird written with a react data flow that's totally different from the way everyone else is doing it but one thing to keep in mind is to not implement Redux before you have problems with the vanilla react dataflow even the creator of Redux then I promote is advising against using redux until you have problems we're done we never react so that's definitely something you should listen to if even the Creator itself is advising against using it too early another thing is of course there's a lot of middleware you can use and take advantage of saving grade out in the state but I think for most people the complexity issue is what they're gonna be attracted to from redux now I talked enough about this let's go on to the next section where we are going to look at the overview of the components inside the redux framework all right I've made a simple flight diagram of how the data flow inside the Redux framework is typically here you have your react component this could be your react native component your container component which you could typically call the components that are connected to your Redux store they also called container components and this is an actions this is reducers and this is stored this is part of the Redux framework the store reducers actions and the only way to change the state in the Redux framework is to dispatch an action so let's say you have imported the action fetch users inside of your react component then you dispatch the action you call the action fetch users when the for example the user presses the button BAM we call the action fetch users then we dispatch the action its sends an action type and an action payload to the reducer so in this case it would probably be that the action type is fetch users or fetching users and maybe the action payload is too well we don't actually need an action payload in this case we can just have a case inside of a reducer so this reducer takes in the fetching users action type and then it changes the state to the new state so in this case the reducer would maybe change the activity indicator for loading screen to be true so now when the user presses fetching users it will show an exact tivity indicator to show that it's fetching from an API so the reducer is taking care of changing this state accordingly and returning a new state to our Redux store our EDD component is subscribing to the restore so I will see the updated state and it will show them the activity indicator another example for example our counter counter app we're gonna make let's say we have a set counter action when you input the number manually for the counter then you dispatch called the action you sent the action type set counter and maybe your payload is 5 because that's the number you entered in that was not the number 5 so then the reducer it's gonna change our state accordingly so it will set the state of the counter to 5 and it will turn the new state to the store and our react component is gonna see the updated state and it will show the number 5 tada so it's an extra layer of complexity compared to the vanilla react data flow but trust me when you have bigger complex apps it's gonna make it a lot easier and a lot more a lot more organized compared to using vanilla react data flow but remember don't use it until you start having problems with it at least don't use it unless you really know what you have big app coming up okay now we are finally going to go into the actual coding tutorial and make our first counter okay CEO okay so now on to getting our Redux project or actually is just a starter project I'm gonna put in a link to my repository here then I'm gonna copy this with the git clone command and paste it into my console and then I'm going to go into the directory free talks learning starter then I'm going to run yawn install if you don't have young feel free to use NPM install then I'm going to wait for this to install and then we will run the react native run iOS command so this means you have to have Xcode installed and set up and so on and vice versa you can also use react native run Android of course if you want to use Android that's up to you and now I'm just going to wait for this to finish and then we'll move on to the next section and look at the project okay see you all right finally we are inside the project itself it's just a basic counter where you can move the number up and decrement the number you can also reset the number amazing and you can enter a new number and so on so as I said nothing you're gonna write home to your mommy and dad about and show them maybe you will but it's not something you're gonna put on your resume but the point of this project is to very basically introduce you to the redux concept so for now we are just using component State inside this project I will try and increase the font size here as you can see we just have the state of count and here is all my functions I'm binding here is the increment where we increase the count state by one determined minus one on press clear then we set it to zero this is where we in take in the D number the custom number we pass it as in because it comes in as the text from the text field then we set the state to the count and this is just the view of it here's the text input for the D count setting and yeah there's the button for incrementing and the counter itself and decrement and the clear so very very simple example but it's gonna get a bit more complex once we put Redux on to and in this small example it's not gonna make so much sense for you to implement Redux but like I said before when you have bigger apps it's going to help you a lot because you will have it more organized and at some point you simply want to have a global state to call actions at any container you might have so it bear with me in this example it's not going to make a lot of sense to implement Redux here but it's just to show you the basic steps of implementing Redux okay I've talked enough about this I think and let's move on to the next section where we actually start to add the Redux package and start implementing some redux okay Co okay so now on to adding de Redux packages I will be using yarn add react Redux and redux so the Redux package is a platform-independent package for Redux implementation and the react Redux package is well specifically against the react frame direct library okay so we add that if you do not have yarn you can also use NPM install like so with save if you want to save it and the package is named again if you want to try out the yarn package you can go to jaan package.com and install it it's pretty easy to install anyway that's it that's all the packages we need to install to start using readers now onto the next section we actually start to implement our provider and our store okay Co alright hello everyone and what come to this section where we are going to hook up our store to our app using the provider so instead of talking about what is a provider and so on I'm just going to show you the actual code first I think that's going to make it easier for you to understand it so I'm gonna move this import app up here and then I will import react because we're going to use a little J's X in here like so and I will just increase my font size a bit so it's clear then I'm going to import the provider from the react Redux package okay so now it's time to use our provider I will make a app container component which has the provider text surrounding the app like so and instead of using the app we had before here I'm going to use the app container so now we have our provider surrounding the app itself you see a warning down here because our store is not provided to de provide attack as a prop like so because we have not made our store yet we will do that in the next section but to explain more about what is the providers responsibility exactly the providers responsibility is to surround your whole app with this provider tag and then it's going to provide the redux tour to your whole app so anywhere in your app you can hook up to the Redux store or the redux global State that's pretty much what we're going to use it for right now okay so don't try to write this store here we're going to do that in the next section because if you do that you will get an error because we haven't made the store yet but in the next section we are going to do that okay see y'all okay in this section we are going to create or store with a very simple reducer so the first thing we are going to do is we're going to make a simple reducer I'm going to make a folder inside my sauce for our cold reducers inside here I will create a file I will call it counter reducer dot jas and inside here we have a reducer which is a function that takes in a initial state and an action so it takes in the previous state or an initial state and an action the zero is in case there's not been a state initialized it will just set it to zero in the beginning in our case we have a very simple state which is just zero but sometimes you can have more complex States which is an object with lots of different properties in our case we just have it as a serial now usually you would have a switch case in here on your action type so for example if you get the case of increment you would increment or sorry return a state with the plus one so you return a new state for every case you get now let's try the decrement case so here we retrain state minus one so for every of the different states or the different action types you get you return a new state you do something with your state and return a new state inside the reducer now in case you get a action type you don't know what is you will have the default case and you will just return the state okay that's it for very simple reducer now back to our index file or in my case index IRS file I will create my store now and pass it to the provider so to do this I will import create store remember the curly braces around here from the Redux package and we are going to import our reducer from the reducers folder and since we're in the root folder we need to go into source and then into reducers and then counter a Deducer like so then we can just create our store create store and pass in our reducer now we can pass the store property to our provide attack and make it happy and stop making a warning like so tada now we have the store hooked up to the provider we have the provider surrounding our whole app so now in the next section we can start to connect our react component and start using the Redux vehicle state so see you in the next section okay so now we created our reducer and we created our store now let's try and hook up or read our store to the app or react component we go inside FJs and we import connect from react Redux then instead of having the export default up here we will create our own export default in the bottom of the file like so you alright export default connect map state to props in here we'll put in our actions for now we don't have any actions so I just put null and then our class name in this case it's just app that this could be any react component name you have and so on like watch component so on whatever component you're connecting through the Redux store so this is a kind of weird syntax you call the connect first and you call your a component after inside the export default but this is the way you connect your components to the Redux store now let's create the function for the step map states of props it takes in a state and it returns an object where you map the different well you map the state to props so for example I would have my count here from state like so so you map different state properties up to your counter so for example if you have state people you would do it like this if you had a bigger state or state counter now in our case our state is just a simple number so it's just like this then we can see it running still now let's try so now our Redux state is mapped to our props so if I run console.log this props inside my render function and I stop the debugger I already have the debugger running then I go to my browser my debugger and I can see my count in here and this is from the deep props property inside this it's not from our state so this is the redox state which is been mapped to our props at least a part of the state you would say usually do have a very big state inside a Redux and you wouldn't want the whole state inside every component likewise with your actions you wouldn't want the components who access all your actions similar your actions would come in here but we don't have anything right now so that means we can now use this start props that count okay so it's still running because that's what we mapped down here we mapped count to state and it came to our props so now we are using this top props that count in here and if we go and try to increase the counter we can see our text field is increasing because that is still using the state the component state for the counting but our field in here out sex-filled here it's not being updated because this is just a redux state or this is our redox state we have here and that's not been incremented or decremented as we press the buttons that's only the component state that's being incremented or decremented but that's what we're gonna do next we're gonna hook up our actions such that when we press the buttons we will call our action or dispatch to action and the reducer will take the action and give us our new state so see in the next section okay so now we have hooked up our redox state inside here by using the props that we mapped to our map inside our and I've stayed two props function from the redox state and we map that onto count so our props they start props that count is now the redox state of the counter now we saw nothing happens when we Chris probe press increment or decrement only in the counter here which uses the component State now let's try and do so that increment also increases the redox state so to do that we need to create an action an action is the only way to change the read of state so first I'm gonna make a folder called actions and inside actions I'm gonna make the file called counter actions the jeaious and inside here I will export a function called counter increment and error function error function like so and this function just returns a action type so we write it as type and I will write increment so increment is the action type okay so now you also need to export or do a easy way to import these actions in our different components so we create a index file index touches inside here we write export star from counter actions so this makes it so that you can use the folder and import any action you want from it which we will do now inside the app.js file it's right here we will import the action so we write curly braces counter increment from actions so this makes that you can import lots of different actions from your different action files in an easier way the index.js file wire that okay so now imported the action now it's time to hook it up down in our connect to do so we can just insert a object here and tried counter increment like so now we have hooked up the the redux action inside our app or a component sorry and we can now call the action anywhere we want to so that's instead of running this on press increment which is adding or changing de state inside our component State we'll just use this props that counter increment so that's what's changing in the Redux state now let's see if we press + here you can see that it increases but nothing happens on our text input up here because that is still using de component state so if you press - you can see it's still changing because our decrement actually is not hooked up to our actions inside redox so let's try and do the same with the decrement action we go inside counter actions Jess you write export Const counter decrement an arrow function that returns an action type now let's let's import it kind of decrement from actions and connect it inside here like so now we need to call it inside our view so in here with this unpress decrement we will call this props counter decrement like so and we can see now we are only using the Redux store the state inside the Redux store we are only using the Redux actions and this is purely the Redux state we're messing around with it now ok so let's try and see and so let me show you where it actually changes the state as if you can remember we made our counter reducer inside the reducers folder where we have a switch case for the action type and in case there is an increment this state will be plus 1 case of decrement a state minus 1 so that's the action side we are making a switch on it's just a string and inside our counter actions file we dispatch these action types here it's increment here ste comment and our reducer handles the different action types so that's how it works basically and of course you can have multiple components that can call an import any of these actions as they please likewise with the different properties in your state they can also map that to their props and use it and show it so that's how it works in a nutshell in the next section Wiggles and the clear and the set action ok see you next section ok so now we will hook up two more actions to our component we will also create the actions of course which is the clear action and the changing of the counter manually inside the text field here so let's create the action first we will create counter clear inside our counter actions file it's going to return the type clear and we save it like so then we will import it inside here from our actions and now we will hook it up inside here counter clear down on our connect now we can start using the action so instead of this on first clear no actually yeah I'm gonna put it here so I called props counter clear like so let's see if it's working no nothing's happening so why is nothing happening well nothing is happening because we haven't handled the action side inside a reducer so let's go inside our counter reducer inside here we can see we have the case for increment we have the case for decrement but we don't have any case for clear so let's make that case clear in that case we just want to return 0 and reset the state cero now let's try again see if it works yeah uh it wife's now okay so now we are only using the rear sections and state to do this pretty cool huh so what else do we have we have to change text up here I would like to do so that we change the state in the redox state also why I did text field let's try and do that I will do the same thing again except for this time we will take in some kind of data from our view and send it next to our reducer so in this case we have what we call an action payload so let me show you how that works I will make a action called counter set and inside the arguments here I will put the number that will receive I will call this receive number just to be clear and inside here we have D type they call it set then we have the payload which we can make s receive number so now let's see how that works inside our counter reducer so inside our counter reducer we have a case for our set and in our case we now also have an action payload with us so we just set the state or the counter number to be action dot payload and action that payload was what we defined inside our counter action in here it is the receipt number that we get inside our action and we set the payload to be that and then again we set the whole state just to be the action payload now let me show you how this works inside our component so we call inside the text field unchanged text is called every time we write a number and it gets passed as an int because for some reason the text field makes or the text input makes the et number into a string so but instead of calling this that set state we will call we will call the action of setting let me just import the action first up here counter set like so and let's hook it up down in our connect here counter set like so then let's try and call this the counter set from our props and this time we can input our receipt number in here as the argument so we can insert count here okay now let's try and see okay nothing happened because you also set D yeah well nothing's happening here because you also have this component state still in the value of the text input so let's try and change it to props instead to use the redox state okay now they are both changing now let's try and set a zero here and change it to 90 and we see the redox state is also changing to 90 because we are calling the counter set with our payload here so now the whole app yeah the whole component is using the Redux store and the redox state now let me show you something else we can do we can take all of this and delete it because we're no longer using the component State so let's see still everything is still working just doing some manual testing here oh this undefined is not evaluating this profs counter set that's because I still need to bind my by my unchanged text in here actually yeah let's just do it in the constructor so I'm just gonna make a constructor with unchanged text just bind it to this because we're calling this inside the unchanged text and it's being used in here let's try again I was doing so well and suddenly I screw up okay so why doesn't it at me it's just my four number not working so well okay so as you can see my point I was trying to make is that the component is now getting a lot dumber meaning that it's not handling all the state anymore inside itself why at the component state now we moved all the responsibility of handling the state onto the Redux framework inside the reducer and dispatching we actually so this has put a more organized framework inside your app and it makes it easier to comprehend what is going on actually when you start looking at big apps with lots of things going on you can easily see the reducers and the actions and not having to look inside the different components so that's it maybe we will try and add some more yeah we're gonna try and add a another reducer because normally you would also have multiple reducers and multiple actions I mean you would have them in separate logical component or I mean files like you would have a people actions or people reducer for another set of functionality which I will show you in the next section one more thing I like to show before we start implementing other actions and another reducer is that you would usually have some kind of types file but you would have all these strings declared as constants because we are using these strings two places and you know something can go wrong when you do that it's not a very good practice to do it so what you would usually do is you would make a type file declare them as constants in here and important in both your actions and reducers let me show you how that is done we will have a types file in here we would write explored Const set counter like so and our write for examples it counter and we would try to import it here set counter from types then I would write it here it's that and then I would do the same thing inside my reducer I would write import set counter from since we need to go one level up since the types file is in our actions we need to go bundle up and into actions and then two types need to put some curly braces around also then we can use set counter and let's see if it's still working it is still working let's do the same thing with our other actions so let's make one for clear counter and one for increment counter one for different counter and that's it now let's try using these decrement Oh clear okay so increment color different kind of clear counter and we start using them here what's that like so same thing inside our reducer determined and clear like so and start using it here instead of our little fetch rise strings like so and we can see everything is still working yeah okay so that's just a concept I wanted to introduce to you now I didn't start out introducing it because I think that might be too much for you at one time in the next section we will start to create another action file and another reducer and we'll start to try and have a little more complex state with another property in it so see in the next section okay so now I think I should show you how to input implement another reducer and have multiple reducers and another actions file so first of all we are going to implement the other reducer and first we will make the file I will call this hello reducer and inside this reducer we will try and have a initial state here it is an object with different properties so for example here we have hello text just saying hello and then we have a reducer as before that takes in a initial state and an election and it's a function inside here we will have the switch case for an action type and by default we will just return this state so very much like our counter reducer we have initial state here we just have the state as a single number instead now we are going to try and have it as an object with different properties so for example here we have the initial state as an object here and for example you would have multiple properties in here like loading true or whatever another as many properties as you would like to have and mess around with you can't have anything in here that's usually how you would have the state initial state mapped out inside your different reducers but in our first case we just made it simple and had a serial in here okay now we need to import this reducer also like our counter reducers but before we can import it we need to combine them together and to do this we will create a index.js file inside our reducers folder inside here we will import combined reducers from Redux package and then we are going to import our different reducers so we import counter reducer from counter reducer and we import hello reducer from hello reducer now we are going to export by default the combined reducers function and inside this function we insert our different reducers and mapped into properties like so so we would have counter would be mapped to the counter reducer and hello I would map to the hello reducer like so now we need to start using these combined reducers inside of our index file in my case iOS and instead of just importing a single reducer which in our case was the counter reducer we will import all of the reducers so we would do this like so and I will just rename this to reducers also here now this works because we are having the index.js file so when you import from the folder it will look for the index.js file which combines the reducers so now we get an error because we are doing a bit different mapping inside here let's look at our app J's file so before we just had it as state in here but now we are using something called counter so you can see it's working now again and we are still mapping it to the count inside our properties so let me show you inside our index.js file we map this to counter our counter reducer and inside app we again take the counter property from our whole redox state and map it to the count so now let's try and import the hello reducer also from our state dot hello I think that's what I called it let's check in index jeaious form the reducers yeah I called it flow map it to my hello reducer and inside my map state to props I've used hello to state dot hello so let's try and look at our props now how this looks now that we imported two states I already have my debugger running here so I'm gonna go into Chrome and refresh here and now we can see from the console lock upside in render we have here the count to be 0 and we have hello from the hello reducer and you can see that it is a a object with a property here hello text and we could also put in other properties so for example let's say loading false let's try and look now inside our console.log and we can see now we have another property called false or I mean false in loading inside the hello that we mapped here so let's try and use the hello text from our hello reducer we go inside text and make it text field here and we can just do this that drops this start drops that hello dot hello text okay like so and it says the low here which we defined inside of our hello reducer up here now you would probably use some kind of these structuring maybe to make this a little prettier now we have another reducer and we have started using the other reducer we haven't tried to make new actions I think we should try and make a new action and try to do something where we modify maybe multiple properties inside of a reducer instead of just having D simple number that we have had inside of our counter reducer so let me try and show you what we mean I mean by this now let's try and let's make a action first so I want to you know I mean the strain reduce modify reducer so I will make a property instead of called press button here then I will make another text field here inside of app and I will write you did you press the button and in here my prop will be the boolean of press the button I'll make it to string now I'll get my pressed button property from my hello reducer I'm just yeah and it shows here did you press the button false so let's make a button under here show me the magic and on press we will have our action of this props the hello action I will call it with my amazing creativity and it was show warning this probe is not as quiet but it's not it's undefined because we haven't made it yet so we need to make a hello actions the J's inside of our actions folder inside here I will call this what did I call the action I called it hello action ok hello action and it will return a type I haven't defined my type yet so I will do that inside types types yes inside actions export cons pressed hello button like so then I will import the type in here press the load button from types and use it in here instead of a string then we need to go into the index.js file inside our actions folder and export all of the functions from our hello actions then we need to go into our FJs file and get the hello action imported from actions and we also need to put it in here this is getting to be kind of long now this line here I'm sorry about that okay so now the warning disappeared because we have the hello action imported and defined now so but nothing happens when I press show me the magic because nothing is defined inside of our hello reducer to handle the pressed hello button action type we just have the default case in here inside of our reloaded reducer so let's import the pressed hello button from let's go up a folder go into actions and go into types then let's go and take I'll handle this case we will return now this becomes a little strange we have to return an object with a dot dot dot state and press button to true so this is using some ESX magic to give us the whole state object except for this pressed button property we want to change that to true so it will take the whole object of this all the properties return them as they are except for whatever we define in here so let me show you if we press the button here it will go to true because we changed it to true here now if we also press Enter hello text too you press the button like so you press the button Wow and this one it comes true now I could actually remove this now because this is basically our whole state we only have hello Tex press button like so but let's say that you only wanted press button to be changed and you didn't have this data state you know only had this then the hello disappears because you just changed the state into only being this object with this property and we but we would like to continue having the previous state of all the other properties as they were before so that's why we have this in here like so okay so that's it - thank you for watching so thank you for following this whole tutorial if you've been through it all you are awesome and now you know at least some very basic Redux functionality we have making been making our own actions we have been making our own reducers and we have implemented inside our react component now if you want to connect other components to your react state or react Redux store you would use the same principle of using export default connect and yeah importing your actions and using them and making your map States props you could do this in any component you want to usually you would have these bigger container components that connects to the Redux store and yeah that's it so a thing we didn't get into in this tutorial is asynchronous calls via Redux like API calls for example you could use something called Redux akka or Redux func to make a PA I cause via Redux inside the actions of a video action but that's something I will say for another tutorial for now I'm just going to see how you guys react to this tutorial made here before I invest any more time in another tutorial but in Cygnus API calls with Redux is this is definitely next on my list of tutorials to do so with that being said I hope you got something out of this tutorial and I'll see you next time hopefully

Channel: ReactNativeTutorial

Views: 45,224

Keywords: redux, react-native, mobile app development

Id: Hn2acItzQBk

Length: 67min 15sec (4035 seconds)

Published: Wed Dec 13 2017