React Native Redux - A Practical Implementation | Dope Programming | React Native Tutorials

[Music] welcome back to the channel and in this tutorial we'll have a practical implementation of react redux and in this tutorial i'll be uh getting the user's contacts from its phone and then i'll process it and store it inside of redux and then i'll be able to uh to access these contacts inside of this particular screen which means that i have the centralized state and i can modify state from any of my apps screens so in order to implement redux first of all we'll need to set up the store so create a new folder and call it store inside of the store create a new file and call it reducer.js all right let's create a new file and call it store.js so inside of the reducer.js create an object called initial state okay so inside of that you can have any of the values inside of this object depending on your project but in this project currently we have only one value that's called contacts and that's an array all right let's create the reducer itself so cost reducer equals and it takes two parameters the first parameter is the state and will initialize it with the initial state then it takes another parameter that's called action let me explain it and we'll return the state as it is for now because we are not updating anything right now all right what it is an action will be coming as an event from the screens of the application to this reducer and are based on that particular action then the state will be updated by the reducer all right all right let's export it and now save the changes now go back to the store and create the store itself so here we'll need to import create store from redux all right and then what we need to do here is const store equals create store and it expects a reducer we have already created a reducer let's give it here and then export the store from here that's it now in order to integrate the the redux with the react application or react native application you need to use react redux so react redux comes into place and we'll need to import the first thing that's called provider from react redux and for man application components that would be the children of this provider this provider also expects a store we have created a store so we don't need to worry about that all right save the changes and it doesn't affect the app at all now what we'll need to do here is we'll need to integrate the redux with this particular screen of our application so how would we do that let's create a couple of functions [Music] so we have these uh let's import the connect from react redux and save the changes right so it's fixed now and let me explain what exactly happens here we have these two function that seems to be a little bit confusing the first function is map state to props you know that if you already familiar with react we have this props that's coming with this component all right and you also know that each component of our react application is a child of this uh this child that is coming from this main application this man application is provided a parent that's called provider and provider has a store this store is mapped to each child of the provider and whenever the this function when each component this has this map state to props the the store will be mapped to that particular component all right so in simple words i would say that this is giving us the state that we created we can fetch the data from the state by using this function then another function that is called map dispatch to props map dispatch to props does is sending events or dis or actions to modify the data inside of the store so it triggers some action and the on base of this the action the reducer modifies the state all right now this connect component what it does it connects these two functions and maps it to this component all right so these this function and this function is mapped to the app what is the app the app is that particular component all right we have integrated redux in our application now what we need to do here is to also integrate the the redux inside of the contacts screen so it would be easier this time let's grab all these copy it and paste it here save the changes it will give us an error but we'll import connect from redux and that's it it's connected okay so we are in the app and we have fully working application we have just configured the redux but we are not doing anything useful right here now let's do some main thing that we need to fetch the contacts on the home screen now let's const create a function that's called the fetch which contacts async and that would be a function an asynchronous function and yes that's it let's also create a state value here so const contacts set contacts equals use state and that would be an empty array let's fetch the user's contacts so the first thing that we need to do is to check for contacts permission so const status equals await permissions dot actually first import all as permissions from permissions and also import all as contacts from expo contacts all right so now permissions dot get sync and what permission we want to check is permissions dot contacts okay now let's create a variable called final status equals status if final status not equal to granted if the permission is not already granted then what we'll do here is we'll ask for the permission we'll ask for the permissions and let's assign that permission value to the final status if it's still not granted then we can't do anything here so if final status is not equals granted this time then we'll return because we can't fetch the contacts without the permission now if we have the permission in the best case scenario then what we can do here is that cost data equals a weight get contacts async and that's it all right now what we'll need to do is to set contacts data and then save contacts to redux so here whatever i need to do i will create a text and not inside of the touchable opacity but below that touchable opacity and inside of the text i'll specify the contacts.length that's it save the changes and now you can see that uh the the length is showing as 0 for now because we are not calling this this function so how can we call this function let's go for use effect that comes into place and yeah we'll call it just one time and yep fetch contacts async save the changes now you can see that the length is 24 which means that we are fetching the user's contacts now what we'll need to do here so go back to the store create a new file called types.js here we need to export update contacts export const all right and now let's go back to the home screen let's import the types import all as types from dot dot slash store slash types save the changes let's go to the dispatch and create our first dispatch that would be update contacts it takes one parameter that would be contacts it will return a dispatch and the action type would be types dot update contacts we'll send the contacts in the payload object and that would be contacts save the changes we have created our files dispatch let's trigger that dispatch right here props dot update contacts and then we'll pass in the data right here so we are sending the trigger to the uh to the reducer now let's handle that trigger inside of the reducer so what we'll need to do here we'll need a switch statement with action dot type the first case that would be let's import the types here import all as types from dot slash types the first case that is types dot update contact all right so here we'll need to return the new object which will copy all the value from the state and then it will update the contacts value of the state to the action dot payload dot contacts by the default if it's not that action then it will return the state as it is save the changes and now let me explain where this action action.payload.contacts comes from let's go back to the home screen props dot update contacts has been triggered the update contacts function is here it takes one argument or parameter that's called contacts it returns a dispatch the dispatch function is called here the dispatch function is sending an action what action is sent by the dispatch that is this action variable right here all right now let's go back to the home screen it's in an action and action is an object this object right here it has two parameters the one is called type what type of action has been sent which means that what kind of event has been triggered all right then the second one is the payload that is that particular event contains some data yes it contains some data that is contains payload and inside of that there is contacts the payload is an object and you can send anything inside of this object to that particular event all right now we are handling that action dot payload and payload contains the contacts that assign that contacts to this contacts in the newly created object all right now we have saved our contacts inside of our store now we want to access these contacts inside of the contacts screen because we are fetching the contacts on the home screen not on the contacts screen now we'll be able to access it on the contact screen so if that's the case which means that we have implemented the redux in our application successfully otherwise not let's go to the contacts screen and let's check out for some configuration we have already done the configuration right here need to do first check out if we have the contacts right here prop start contacts.length so all right we have 24 contacts inside of our home screen if i click on the contact screen this is exactly 24 on the contact screen as well now what i need to do here is create a flat list and show these contacts in a little bit detail and let's create and render item and that is and now let's create a touchable opacity and inside of that let's uh item dot phone numbers zero dot number all right let's give it a style also style equals styles dot btn we have the phone numbers have been fetched let's bring up the width it's cost width equals dimensions dot get screen save the changes and there you go now i can press on these buttons but that doesn't do anything right here now on press of a button i want the uh to call some that particular number so i can do that easily right here so let's specify the on press and then linking dot open url and that is tel and then the phone number so that is item dot for number zero dot number save the changes and let's try that out if i press on it and there you can see that i can call that particular number awesome now i want to delete the uh contact by long pressing on this contact so how can i do that let's create a on long press and that would be delete number or delete item and let's uh pass in the phone number of the user and that is item dot phone numbers zero dot number let's create the delete item right here cost delete item equals function and this will do create a filter all right so we have created the filter and now let's update the contact so that would be prop start update contacts with filter save the changes and that's done let's create this dispatch right here type start let's import the types first so let's import it right here import types from save the changes start update contacts and then in the payload we'll send the contacts save the changes and let's check it out if it works or not so let me long press on this button and there you go the contacts are now 23 and it is removed let's remove this one it's 22 21 and it works exactly like you would expect so this was the tutorial of how you can create uh that kind of application inside of the react native and how you can integrate uh redux into it thank you very much guys for watching this video i'll be seeing you guys in the next one please subscribe to the channel if you're not already otherwise you know what to do thank you [Music] [Music] you

Channel: Dope Programming

Views: 3,627

Rating: 4.9574466 out of 5

Keywords: react redux, react native, react native for beginners, react, redux, react native redux, expo contacts, expo redux, expo redux example, redux practical example, redux with good example, redux vs context api, react native tutorial, react redux tutorial, react for beginners, connect react native redux, functional programming, wtf is redux, react native vs flutter, why redux is so popular, why react native is so popular, redux for beginners, react for beginners tutorial

Id: -2Z6PgJIGuM

Length: 21min 18sec (1278 seconds)

Published: Mon Mar 22 2021