#1 WTF is Redux? | React Native App | Redux Tutorial

[Music] welcome back to the channel guys so in today's video I'm gonna be showing you how you can use redux in your react native application for me starting out with Redux was really confusing like everyone I started out by reading the documentation though the documentation is quite in-depth it can soon get very overwhelming also since Redux can be used with any JavaScript library it does get a little confusing when you try and connect it to your react or react native application so in this video I'm not going to be going to the technical jargon of Redux I just create a simple react native app that uses the internal state and then will swap that state out to use Redux in that process I'll walk you through the basic concepts of Redux mind you I'm not a pro at using Redux but I'm sure by the end of this video you'll understand the core concepts involved so as always to start out with I have an empty react native project in front of me that I created with Expo and I've opened it up in my favorite code editor visual studio code so let's first start by installing our dependencies so in your project folder the first thing that we need is redux so we'll say npm install redux the next thing that we need is a library that will help us connect redux to our react native application that's called react redux so it's a npm install react redux after installing both of them in case you get any error just run npm install again and restart your expo project and you should be good to go so here I have some points regarding redux that I'll get rid of for now I'll walk you through them once we have a basic react native application ready so the application that we'll be creating is a basic counter application all it allows us to do is increase and decrease a counter so let's start feeding their application here let's get rid of this text and started this let's pass in a view which has a flex direction of row and inside this will pass in I increase and decrease button with the counter so for that let's import in something known as touchable opacity and pass that in here so it's a touchable opacity inside that it will have a text which says increase I just duplicate that and the other button will be decrease I'll also pass in a texture which will be the value of the counter so let's say it's zero let's a style this a little give this a width of 200 and justify content of space around and I'll also just increase the font size there that looks much better now let's replace this counter with a state so here will say state is equal to let's call the property counter and give it a value of 0 let's replace this with this dot state dot counter and the app still looks the same now let's put in the methods that we'll use to increase and decrease the counter so in the touchable opacity let's put in an on press that points to a method called increase counter and here we'll put 1 which says decrease counter now let's go ahead and create these methods so we say increase counter will use the fat arrow functions in order to do is we'll say this start set state update the counter to this dot state dot counter plus 1 and similarly in the decrease counter we'll say this dot state dot counter minus 1 now if we click the increase button we see that the counter increases and similarly if you click the decrease button we see the counter decreases obviously the internal state of this application is not very complicated and you wouldn't need Redux for this but it will help us understand the concepts of Redux very easily now before we can act after Redux we just need to format our code a little bit here in our project folder let's create a new folder called source and inside that let's create a new file called counter app tortillas will basically move our code from the app tortillas into the counter app dot J's and I'll tell you why we're doing that let us rename our app to counter app and in the app tortillas let's get rid of this state here with the functions and also let's get rid of this view here let's in turn import counter app from source slash counter app and pass it in here their application still works just bear with me you will see why we did this so let's get back to the notes I was talking about earlier so what is Redux Redux is just a better way of managing the state of your application the way Redux does that is is by storing the state of your application in one particular place that one particular place is known as the store unlike a regular react native application in which each component stores its own State Redux on the other hand stores all the state in one particular place known as the store so now we know that as state is stored in our store how do we modify the state the state can only be modified by something known as actions however the actions cannot directly modify the store the actions must go through a reducer to modify the store the reducer is nothing but a function that receives an action modifies the state to give us a new state we have to keep in mind here that the state is read-only that means that the state is only copied and modified and returned to us the original state is not tampered with now we have a store we have an action that can modify the store the action goes to the reducer to modify the store however how does the action reach the reducer the action reaches the reducer by something known as a dispatcher so basically the action needs to be sent by someone to the reducer that someone in our case will be an on press so when we press on a button we dispatch an action which will go to the reducer modify the store and the reducer will return us an updated state so let's start by creating our store we can do that by importing create store from redux coming here let's say Const or is equal to create store and save that out you can name your store whatever you like but by convention it's named store as you can see we're getting an error here which says expected the reducer to be a function so like I said the store needs a reducer to be able to access it and modify the state so let's pass in reducer here and let's create this reducer so it's a constitution it's gonna be a function which currently doesn't return anything and let's save that out and now the error is gone so if created I reducer but for the reducer to be able to modify the state it needs to have access to the initial state so let's create that so it's a Const initial state is equal to counter and set that to 0 this is similar to the state that we create in a normal reactive app now let's pass that initial state as the first argument to the reducer so it's a state and set that to the initial state so now we have a store we have a reducer that can modify the store but if you remember I had told you that a reducer can only modify a store when an action is passed to it for now we won't pass any actions and we'll just return the state as it is let's now connect our store to our react native app to connect our store we need to import something known as provider from react redux now we can wrap a component with a provider and pass our store to it by saying store and pass the store this is why we had refactor our app and moved it into its separate component because we need a root level component around which we can wrap our provider this provider makes sure that this store is available throughout this app even if it has multiple components inside it so though we've passed our store using the provider into our counter app we don't have access to it inside the counter app just yet for that outside the counter class what we need to do is we need to create a new function I will call the function map state to props which takes an argument as the state and here we'll use a return and we'll say counter and set that to the state dot counter all it's doing is is carrying the state dot counter from the store and mapping it to a prop called counter for this class next we need to still connect this to our counter app because here if we say this dot props dot counter we'll still get nothing in front of us so for that let's import in something known as connect from the act Redux and coming down here at the bottom where we export the fault counter app instead of that we'll say export default connect pass in the map state to props and then pass in the counter app in brackets once we save that out you notice that here this dot props dot counter is working I know this doesn't look very intuitive but all it's doing is it's connecting these props that we created to the counter app so now that we're mapping our state from the store we can get rid of the state inside this class and we save that out it's still working so now it's time to pass in actions to modify this state for that we need to create another function here which is map dispatch to props which has a dispatch method available to it and if we come here I told you an action needs to be dispatched by someone which will be done here in the counter app so we'll say increase counter it'll be a function which uses the dispatch method and like I said earlier we're going to pass it an action which is just objects with a property of type so we'll say type and we'll say increase counter similarly we'll create a decrease counter method I will dispatch it with an action of decrease count now we need to replace the dis not increase counter with this dot prop start increase counter and the decrease counter with this dot prop store decreased counter and we can get rid of these methods here let's save that out and if you test this we see nothing is happening that's because the action is being dispatched but it's being dispatched to the reducer here in the reducer were not doing anything but just returning the state so now comes the second argument of the reducer which is the action so the reducer takes the second argument of action and inside the reducer will run a switch statement to check the action dot type and if the case matches the type which is either increase counter or decrease counter we'll update the state so if it's increase counter we'll say return counter which will be state dot counter plus one and if it's decrease counter will return counter which will be state dot counter minus one and if nothing is matched we'll just return the state as it is let's save that out and now if we click increase counter we see that the counter is increasing if we click decrease counter we see the counter is decreasing this is one last thing I want to cover and that is that all the functions in redux must be pure functions that is that a function must always return the same result when the same arguments are passed to it and it shouldn't utilize any variables that are not there inside that function or make any Network requests that makes sure that your state is consistent we'll talk more about Redux in the future videos this is a very simple application I hope you guys try this out and please like and subscribe

Channel: Unsure Programmer

Views: 145,446

Keywords: React Native, Redux, react-redux, Expo, Easiest Redux Tutorial, Simple Redux Tutorial, Unsure Programmer, Provider React, Connect React, mapStateToProps, mapDispatchToProps, WTF is Redux, Practical Redux

Id: KcC8KZ_Ga2M

Length: 12min 51sec (771 seconds)

Published: Tue Jul 31 2018

Reddit Comments

[u/MrGurns]

Not as good as mobx, but that's just my opinion.