Using Redux in React Native - Part 1 (The Basics)

hello and welcome to coding with curry today i finally decided to do a video on redux if you're new to react redux is a way for you to manage date in your app in one location so instead of having your state local in your components you can have some state separate in your app that you can access from different components so those that are first learning redux it can be very confusing at first but i'm going to try and simplify it as best as i can by creating a short little app here we have the food form which is this screen here we have our navigation options for react navigation and we have local stay here for food which is the input here the input text and we have a food list array here which will store our list of foods and we have a submit food function here to set the food list so this bread operator takes the existing food list and it adds a new food with a key that is a random string based on math.random and name which is the food text here and we have a delete food function which will delete a food based on a filter function so it's saying if the key matches the key in the list then we delete that food object okay and you can see our text here we have our text input we're setting the state for food when we change the text and we have a button to submit the food so we're submitting this.food so whatever text we put in here so we could put burger here so now this.food is now burger and we have a button to go to the food list screens so this is part of the react navigation library if you're not familiar with this please look at my video that i did on using react navigation in react native and we're passing the food list to our food list component and we're passing our delete function to the food list so we can delete foods so i'm showing you how you would normally do this stuff without using redux this part is the part that we don't want to do we don't want to pass the state and functions to another component if we don't have to okay and you can see our styling here for our component now let's go to our food list and you'll see that we have some navigation options for this too so we can press go to food list you can see we have green for our editor and we have a render function with a flat list so the file list contains the data from our food list parameter that we passed to this via the react navigation object then we have a list item that represents the food so the list item is coming from react native elements here and the icon is two so our key is our item.key which is our key field that we created and our data that comes in for the render item is data.item.name so name is the other field that we have and then when we press the icon we call back to the delete food method and we pass in the key which comes here and then we delete that object from the food list and we update the state so let's go back here and let's press submit for the burger so submit let's go to food list you can see we have burger let's put in another one let's do taco submit and you can see we have taco now let's delete taco so i pressed the button but because we're using react navigation the state is not updated in this component but it's updated in the food form because that's where we're actually setting this date and our food list this is actually not part of the component hierarchy so we can go back here and then go to food list you can see it's gone this is what you would normally do for a basic app but now i want to use redux to handle rsdate so the first thing i want to do is i want to create a couple new folders i want to go to source i want to create a folder called action actions and i want to create a folder called reducers and now for the action folder i want to create a file called types so this will be our types of actions so types.js and we can just export a couple of constants so i'm going to do export let's make it constant and then i'm going to say add food and then we need to assign a string to it so let's just call it the same let's just say add food and let's do export constant delete food and we'll do the same here okay so we're just doing all this so we can organize our code so it's more maintainable now let's go to our reducer folder and i want to create our reducer so a reducer is just a way for you to create some logic based on different actions that are invoked in your application so let's call this food reducer dot js and the first thing i want to do is import our actions so let's import and from us do actions and then types okay and we'll import our ad and our delete and now we need to create a constant initial state so the initial state is the initial state of our state object here so let's do constant initial state this could be whatever you want to it doesn't have to be called initial state but it makes sense equals and then we're going to have a food list so we're going to have food list so this is very similar to what you would just do in your normal component you would have a state object here with your food list like we do in our food form here like this okay and now we create a reducer function so let's say constant food reducer and if you want to see more uh documentation for this you can go to the docs here there's docs for react redux and their stocks for redux so this one you probably want to look at more to understand what the different parts mean like connect provider etc but let's go back to our application here and we say equals and then we pass in what we want our state to be so our state is set to initial state initially so we're initializing our state to this here let's put a i in here okay and then we also pass in our action okay and this is the basic setup for your reducer and now you want to do a switch for your different action types so we can do switch we have action and then we have type from our action so we have action.type and then we want to do a case for our different types so we do case add food then we return something and then we do case delete food then we return something and you could do a default if you want to and for default we just return our same state so we just do state or return state return state okay so this is kind of the basic format of your reducer you are using the action that you passed to this to run some logic that affects the state of your state object here and then we want to export default food reducer okay i hope this makes sense so far it's nothing too crazy yet so we just have our action types and we're switching our action types to run some logic so in our ad food here i want to first do a spread operator so we're using this bread operator because you never want to change the entire state object at once you always want to either add to the state as it is now or you want to update a certain part of the state so this gets our current state as it is and then we do something to a part of it so here we're changing our food list so let's say for example we had a [Music] test state object here and this is null if we ever change the food list we don't want this to change too so that's what this helps us do here this spread operator so let's get rid of this for now and we want to say food list is now state dot food list so we have the current state and then i want to add to that food list so i want to concat to the array so concat and you might be wondering why we're using concat instead of push concat returns a new array but push adds to the array so with what i just said before we don't want to mutate the study directly but here we want to create a copy of the new array and return that back instead so this helps us stop any race conditions that can happen if you're constantly um trying to add or remove new foods very quickly in your app okay and i forgot the return here so i want to return this object here okay and then i want to add first i want to add the key so before if we go back to our uh food list food form here we have a key with math.random and a name.food so i'm gonna copy and paste these here and let's put these in here so i want this key to be math.random still then i'm gonna have a action here and we need to get our data from that action but we don't have that yet so let's first go to our action folder and let's create a new file and i'm going to call it just food.js and this is actually where we create the actual actions for our application so the types are the action types like they represent what we want to do and here we'll actually put the actions with our payload here so we want to import first our action types so we do from types this will all make sense in a second and let's import our add food and our delete food now i want to create two functions one called add food and one called delete food so let's do export constant and i want to say add food will be the name of our function and we'll pass in a food object and we will return a type so like an object that has a type so the type will be of add food and we'll have a field here that represents the data so we'll have let's call it data and it'll be the food object okay and let's copy and paste this and let's call this one delete food for our type here and for this one for the delete food we really want our key so i'm going to pass in the key here and set this field to key and set this to key oops first let's uh call this delete food okay so when we want to add a new food we the only way to do that is to call this action here and to delete food we have to call this delete food method from somewhere in our app if we don't call these methods then we cannot actually invoke this logic here so that keeps things kind of separated out in different locations and easier to manage okay so let's uh save this here and let's go back to our food reducer and now the action from our ad food we have this so the action here represents this object okay so when we add food we get back this action object when we delete food we get back this delete food object so we get back an action so this is action so action.type and action.data so action.type is why we have the accent.type here i should have created this file first so let's go back here and now we have action.type here and now we have action. data okay so i hope that makes sense this action represents these objects okay let's get rid of this one here and for our delete food we're gonna have a return here also and now we want to do the same with the state so let's do state let's put this on a separate line state and now i want to do the same thing that we did before with our footer function so let's go back to our delete food function here let's copy this here and we'll put it into here so now we don't have this so we can get rid of this dot and now we need to set it to food list so we can set it food list so now the food list will be this right here after we filter out that key okay and now let's create the actual store for our reducer so let's create a new file in our source here let's call it store.js and the first thing i'm going to do is i'm going to import some components from our redux package if we look in our package.json here i added a couple different packages here i added redux and react redux so these are the two that you need for your application so let's go to store.js and first i want to import something from redux so the first thing i want to do is i want to import the create store constant and then i want to import the combine reducers function and i also want to import our food reducer reducer from reducers dot food reducer okay now i want to create a constant called root reducer and then i want to call the combine reducers function this will be used if you need to have multiple reducers i always create this out of habit so now we can put a field in here that represents the reducer let's call it foods okay and then i'm going to assign the food reducer to that value and now down here i'm going to create another constant called configure store config your store this could be whatever you want it to be but this is a popular name for this then i want to return let's just return uh create store so create store is the other value from that redux then i pass the reducer to that so i pass the root reducer to that and then i can export default configure store okay so this is all a lot of boilerplate that you need for redux which i don't really like but it's just something that you have to do uh this creates the store for your app okay so let's go back to our app.js here actually let's go to the index.js so this is where we are putting our app component at we're setting it here but now we want to refactor this a bit to use our redux store so the first thing i want to do is i want to import a provider provider from react redux and if you go to the documentation you can look at the provider docs here it makes the store available to any nested components that have been wrapped in the connect function so we'll get to the connect function in a bit too so let's go back to our code and i want to import our store now so let's import configure store configure store from source store and now i want to create a constant object called store and assign that to configure store and now instead of this here i want to create a new component so let's go down here and let's do constant and let's just call it um it doesn't really matter but let's call it redux tutorial okay this would be a functional component and then i want to return the provider component and instead of here we'll have our app so let's get rid of this and then we'll have our app here and we can close it like this and now we can give our store to the provider so we have an object called store here so store equals store and this has to be called store here for the provider and then we can pass our redux tutorial to register component so all we did here was we wrapped our app and our provider okay and we need to import react to so let's import react from here we have store.getstate also got the parentheses here so this is a function don't forget that so if you go back here to the store you can see configure store is a function so it's this function here okay let's save okay so now we have our store available to our components but we're not actually using it in our components so let's go back to our food list let's first actually let's go to our food form and let's get rid of our food list stay here and we can also get rid of our delete food function here so get rid of this and we can get rid of the perimeters that we passed to our food list so let's get rid of this okay so now we're not passing anything to our food list so let's make sure that we're not using our state here anymore for our food list and we can get rid of our submit food function here also so we'll come back to these in a second we'll just create empty functions for now so this will not change because we still need to change our food state locally here so this will still be the same okay so this looks good we got rid of our food list state let's go to our food list and we can get rid of this console line here and we can get rid of this one press so let's just make this an empty function for now and our data will now be something different our data will now be part of our redux store so first in our food list here we're going to add the connect higher order component so let's go to chrome here and you can see connect here the connect function connects a react component to a redux door so this is the last piece of the puzzle for our redux app to work correctly so the first thing i want to do is i want to import our connect function from redux from react redux so let's import connect from react redux okay and now let's create a couple functions so one is called constant map state to props we pass in the state and the other one is called map this patch to props to props so these are both needed because we need a way to map the state to our props for our component and we also need a way to map our actions so map state to props maps the state this maps the actions and you'll see how this works in a second from here we want to return a state object so i'm going to call it foods this is going to be from our state so it's going to be state dot and this is whatever you have as your reducer here so let's go to to the store you can see we have foods here let's call this foods reducer okay and let's go back to our food list and this will be state dot foods reducer let's make sure i spelled that right again so store food reducer and it'll be dot food list because the list is part of our reducer we'll ignore this area for now and now for map dispatch to props we want to map our delete food method to this so let's go up here and import delete food from actions food okay and now we can actually return and we'll just name it delete and then this will return a function where we need to dispatch so dispatch and this should be dispatched if you so dispatch dispatch this could be whatever you want to be really and then we call our delete food method and we pass in whatever we pass into that action so we have key so for the delete method we pass in the key so we have our key here so delete food and then we have key okay i know that's a lot to take in really fast but know that this maps to your reducer so state if you are not sure what this is you can always do console.log state and you'll see that our food list comes from state.foodreducer.foodlist okay you could do the same with dispatch if you want to so now if you want to delete a food we call this delete from our props so we have props dot delete and props die foods here so now we connect this to our component by first putting this in parentheses and we can say connect and for connect we pass in the map state to props let me pass in the map dispatch to props so let's go back to our food form and let's actually just copy and paste a lot of this here so let's copy this into here parentheses and let's import our connect here now let's copy these here and let's copy and paste this into here but we don't need this now so let's get rid of match map dispatch to props and this is okay for this if you don't need the dispatch you can just leave it out here okay let's save now let's go to our [Music] food list and for our data our data is now going to be coming from our props this dot props dot foods save and for our delete here we now have access to our delete function here thanks to our map dispatch to props so let's say this dot props and it'll be just delete and we can pass in our key from our data so we can say data data item dot key okay save and let's reload and let's test it out so first let's type in a let's not even type in anything let's go to food list and we have no food so that's good we have no errors let's go back and let's type in burger let's submit go to food list it's not there so let's see what we did wrong let's go back to our food form submit oh yeah so we forgot to actually handle our submit here so for the submit we need to have a action to add our food so let's go to the food list and let's copy this and i want to have add food now so we also need our map dispatch to props so let's copy this and paste this into here and here we just need our ad food and let's call it ad have our add food function here to pass in our food object so this would be food not key in this case and then we do map dispatch to props okay let's save and let's test this out let's reload and we still need to add that here so let's do this dot props dot add and then we can pass in our state so this dot state dot food okay reload and let's add first let's test it out without a food let's go to food list it's okay let's add a food burger submit go to food list and you can see our burger is here let's go back uh let's do taco submit and you can see our taco is here so our ad is working correctly and let's try to delete a food let's delete taco and we have a reference key is not defined so let's go to food producer 21 not equal to this should be action.key because our key is coming from our action now so we have action dot key okay let's reload that's okay and let's add a few different foods here let's do burger let's do taco and pie okay you can see the three things here now let's try to delete taco and you can see it's gone right away so this is a great way to use redux with your react navigation without having to pass stuff around and without having to refresh the component that you're in manually and we can go back here and we can see that it's still gone we can delete pi you can see it's gone you can say cheese submit delay burger it's gone and yeah this is a great way for you to manage stay in your application redux is pretty complex at first glance but once you start using it it becomes a lot easier and it becomes a lot more repetitive and simple there's a lot of boilerplate with it but it's very powerful and it's been around for a long time uh let's go over this one more time just to hammer the point home of what this is so we have a action type here for food for adding food and delete food we have a food action function here to control the payload of the object so the payload is the food here the payload is the key here so the only way to mutate the state in your application is to call these two methods and then this represents the action in your reducer so if you go to your reducer we have the initial state here which is our food list and then we're switching the action.type for our action types which are ad food and delete food in ad food we are creating a new food list by concatenating it to the old one and using the action.data which is our food object and then we set the state for that new list in our food list when we delete food we are filtering out the food that we don't want based on our key and we're taking that food list and we're setting the state to the food list object here and then we go to our index and this is where the store is available to us in our entire app so you can actually make this available only to certain parts of your app so if you have different components in here you can provide different stores to your app so you can configure multiple stores you can have multiple reducers and your in your store here so if you had more reducers you can just add more here so this part so this file is probably the most confusing but it's very easy to remember how to do this once you do it a couple times it just gets your food reducer it puts it into your root reducer so this just combines your reducers together and then you configure your store and this is your store function that's available to you throughout your entire app and then in your components that you want to connect with your store you need to use the connect function that takes in the map state to props and map dispatch to props and that makes your state available to your component and that makes the action functions available to your component too so without this here you wouldn't actually be able to mutate the state of your app that's what map dispatch to props is for and map state to props if that wasn't here you wouldn't be able to access the state from your store okay i hope that makes sense it's a lot to go over in a short amount of time but if you have any more questions please leave comments in the comments below and i will get back to you as soon as possible redux is only one way to manage state there's different ways there's mob x there's hooks and context api those are probably the other two most popular ones for react native but there's a lot more than that too if you have any questions please ask and stay tuned for the next video and happy coding [Music] bye [Music] you

Channel: The Flutter Factory

Views: 62,943

Keywords: react native tutorial, react native redux tutorial, redux, react native mapstatetoprops example, react native mapdispatchtoprops, react native redux connect, react native configurestore, react-redux tutorial, react native redux provider, cheetah coding, cross platform development tutorials

Id: I0AQW2T3HPI

Length: 32min 7sec (1927 seconds)

Published: Thu Jan 02 2020