Mastering Redux in React Native Expo: A Comprehensive Tutorial

welcome back guys hope you're all doing great and today is in this tutorial I'm gonna show you how to configure the Red X with your Expo app well we all know that ex the redex configurations is the most complicated stuff whenever we're building an any kind of JavaScript application well we need to understand that this uh Redux like it's it's the most popular state management library with for any kind of JavaScript applications like react JS or nexjs on react native Whatever It Is Well it's provides a predictable and centralized way to manage the states of an application so that it make it easier to understand or to debug or even to maintain so what exactly happening is is it to redex uh it's creating a data layer to the top of our application so we can push or pull our state at any point at from anywhere inside the application even at the last style component so that I don't need to share the state from the top to bottom or well that's the usage of the redex so in this tutorial I am going to explain each and every point that you need to understand when you're working with redex so and I'm going to show you how to configure that Redux with your Expo app so without wasting your time let's jump into the video okay then okay then so I already created the Expo app and I installed the native event and I customized this design for this particular tutorial so you guys don't worry about it I dropped the GitHub link description in the description box so please go ahead and then copy that link so let me show you so this is that starter template you can download the startup template by clicking the link in the description below copy this link and open up your terminal and please make sure that you already downloaded the git in your machine if you haven't downloaded it so please go ahead and download it first once you downloaded it and then type get clone and paste that link so this will download the starter template so that you can follow with this tutorial with exact same design what I'm having right now all right so let me close it because I already downloaded it and this app is up and running fine all right so I already my simulator is started and you can see currently it's doing nothing well we have to do everything so let me create one more terminal over here so I need to uh I need to navigate to my app folder so see the app all right so now I'm inside the app folder so in this place now what we need to do is we need to add two different packages well let's go ahead and add the two different packages so basically that packages is going to be yawn add yarn add Redux and along with that we need to add one more thing that is the react redex these are the two packages that we need to download to work with the Redux with our Expo app so Redux react redex so hit the enter so it will download that necessary packages so uh once it's downloaded so what exactly we need to do is we need to create a store and we need to create the actions and we need to create the reduces so basically whenever you're doing something that action will get fired and then for that particular action inside the reducer I will do some set of coding so what exactly I need to do on that particular action and then that reducer will push that update that state and push it to our redex store so wherever that state is being used that state will be automatically updated in in all the components so that's what we are going to do now all right so now we successfully added our redirect so if you want to make sure please go to the package.json and there you can see the react redex and the redex it's configured successfully okay so let me close this all right so now what we need to do is we need to create a subfolder over here inside the app folder I'm going to create a new folder called context context inside this context folder I'm going to create a new folder called actions and inside the context folder right click it and again create a new folder called reduces all right inside this actions folder or inside this context folder I'm going to create one more file that is called store.js okay so we'll worry about this store later so first what we need to do is we need to create the uh actions then we need to move on to the reducers so basically this is the counter example that we are using for you can find a a basic example to work with the redex okay so here let's move into the actions and then let me create a new file called uh counteractions let's keep the name as counteractions.js all right so basically what exactly we're going to do is we go we need two different actions over here increments and decrement so I'm going to create a function called export advanced increment increment so this is going to be an arrow function Arrow function so and then we need to create one more function that function is going to be decrement all right so now we have two different functions one for increment another one for decrement so over here now what I need to do is um so this this this this all right so here let's keep this this type object let's create a type object type is going to be increment type is going to be uh basically we need to return this stuff whenever you are calling this function it's need to return that so the easiest way is to just wrap these things inside this normal brackets so basically that means it's returning that particular object so let's wrap it inside this brackets all right so here inside here I'm just going to say type colon which is going to be increment implement and then let me copy this and I'll paste it here and that is going to be decrement let's say the changes and now you can see that whenever you're calling this function that is returning this type called increment so either you can if you are not using this brackets normal brackets inside this you are returning this object if you are not using that what you can do all right so if you want to return a statement you can directly use the return keyword or you can directly write it in this way that's up to you all right so now this will work perfectly as it's supposed to be let me save the changes all right so now let me go to the read reducers so here I need to create a new file called counter red user dot KS enter and well now what we need to do is basically we need to create the initial state so initially what exactly it's going to this state what exact value that state is going to carry on so basically at the initial point the value is always going to be zero so Lambs is going to create a new variable for initial initial state so initial state is going to be count that's the state which we are creating count is the state name so count is going to be zero that's the initial State and then we need to create a radius so first counter reducer counter reducer is equals to let's open the Arrow function all right so here inside this Arrow function we need to send two different parameters one that is going to be the state and that is going to take the initial state as a value and another one is going to be the action basically these are the action which is triggered from our counter actions then inside here I'm going to write a switch case switch I need to send the action type what kind of action type it's triggered all right so now if that action type is equals to this increment this increment so case increment then what exactly I need to do so whenever this action is being triggered I need to return I need to return an object and I need to spread all the current state whatever that we do have let's return all the state and along with that I'm just going to update the count State alone so States dot count plus one so whatever the value that state have along with that I'm just going to update I'm going to increment with one all right so let's repeat the same stuff for decrement also so I'm just going to copy this and let's copy this case and let's paste it one more time which is for our decrement copy this and paste it here and in this case I'm just going to reduce it to one all right and save the changes at the end I'm just going to say default return State return the state all right this by default it will Returns the state and at last you need to make sure that you are exporting this otherwise it will never work so export default counter reducer okay spelling Mr counter reducer save changes now our reducer is ready so these are the actions and this is the reducer so now what you need to do is in a real time project you might have a n number of states so there might be n number of reducers too so I can't keep on at different different reduces inside our store so what I need to do is basically I need to combine all the reducers as a single reducer then I need to put it into a stroke so to do that what I'm going to do is I'm going to create a new file in the producer folder called index.js so inside this index.js so basically what I need to do is I need to combine the reducers and I need to create my customized reducer by combining all the reduces whatever we created so here so Imports import you need to import it from the Red X basically we are importing from the read x what exactly that you need to import is that create store we are trying to create a store and we need to import one more package and so let's let's see const store we are creating a store by using Create store create not store not this one create store create store and inside this we need to supply our reducers right so uh we need to supply our reducer so before supplying it to it before supplying it what we need to do is we need to combine this reducer then we need to supply it to it so let me show you how to combine it first all right so this is the part that we need to create a store so what we need to do is basically right now we don't need this so we I just jumped one step ahead so we don't need this right now so let me import import from redex so instead of uh that uh come on my PC is loading I don't know why it's too much hanging right now but it's taking so long all right X and here we need to import this combined reduces this is the package that we need to this is the class that we need to import okay so I'm going to create my own reduces of my reducer my reducer is equals to combine already user basically we are trying to combine it and we need to open an object and here we need to supply all our reduces one after another so basically the first reducer is going to be counter and we are going to use the counter reducer which is coming from our counter reducer file so that will be imported over here so now our reducer is being created then what we need to do is we need to export it so export default by default we are exporting it in the name of my reducer so I need to use this reducer inside this store when we are creating the uh the store all right so let's go ahead and create that store right now so let's go to our store.js file open the store.js file and inside the store.js file so what we need to do we need to create these Strokes so let's go here and import and what we need to say from redx and inside here we need to create the stock so I don't know why it's hanging right now so let's create these two come on so create the store it's hanging a lot don't know why okay so import and we need to import our my our reducers from our index.js so from dot slash producers so I'm going to import our my reducer file so what we need to do this basically it's exported from here right so let's copy this go here and here const store is equals to create so hanging a lot and then we need to supply our reducer over here my reducer so this will be imported from our producer file import my reducer from the reducers all right so now the store has been created and all we need to do is to export this store export default store so save the changes now this store is being exported now all we need to do is we need to uh wrap entire app inside the store so to do that what we need to do is so basically we need to create a provider a data provider so and we need to wrap the complete app into the data provider so let's go to our app .js or where is the place um okay so this is the place our entire app has been running right now so what we need to do is so at this point over here I need to import our store so let's go ahead and import our store so import um store import store from our store then what we need to do we need to import the we need to get the provider from our Redux provider so basically that is coming from import from react predicts it's taking so long I don't know why it's hanging right now okay come on so let me copy and paste that line I it's it's hanging right now I don't know why it's exactly hanging okay so this is the one that we need to from the react Redux we need to get the provider all right so I need to wrap this completely inside that provider object so provider provider and inside this provider we need to bring everything completely all this view should be inside this provider and then for this provider I need to supply this store and then store it's just going to have our custom store which we created and we are having over here so sales changes now this app will refresh if there is any error so that will be uh displayed over here so it's still refreshing on so it's referred successfully and so far there is no mistakes all right so so far there is no mistakes whatever we created everything is created successfully so far that is no mistakes so now all we need what we need to do is so we have to move to the part where the action is being triggered okay so uh what exactly we need to do with so when we are doing these kinds of uh actions and stuff and everything so basically there are a lot of ways to dispatch your actions and everything so I'm gonna show you one of the easiest way so first I need to get the state and the actions into this component as its own property okay so that I'm going to map the state and map the actions as the default property of this component all right so let's go ahead and do that stuff so first what I'm going to do is I'm going to change this complete view I'm going to wrap this complete view into a separate component instead of keeping it everything inside an app so what I what we can do is go to the app folder and create a new folder called components opponents and inside this components folder I'm going to create a new file for counter Dot jsx and here all I need to say RN Fe the react native functional X4 component so I'm going to use that so save changes I am going to copy this complete code from here so let me go back to the app.js copy it and I'm going to put back to the counter I'm going to paste it over here paste it then save the changes and this counter component needs to be rendered over here so let me bring the counter component and let's import that counter component over here after so say this changes now you will get the exact same output over here okay so what we are okay so basically it's throwing an error because the taxable opacity and all those things we haven't imported over there so let's go here and import this flexible opacity control space from the react native input detachable opacity and view text everything is here so far everything is good so say this changes and now you will get the exact same thing okay so now the it's going to the counter app and here what we are going to do is to this counter app I need to map the state and I need to map the uh that uh actions so what I need to do is so basically over here so I'm going to create two important thing so just this so over here I'm creating a function for map State and map state to props basically we are converting the state to our property we are getting the state and we are getting the state called counter from where from state.counter.com because if you go here to your reducer we haven't skate code count and which is being exported in the way called counter so we need to access this counter inside this counter what state we have we have the state called count so I need to access this account so that's what I'm exactly accessing over here from the state access the counter and access this count okay we are accessing it now then what we need to do is we need to have the action dispatch method so we need to get the action dispatch methods and we need to convert those as a property so basically I'm creating an object and that object is going to carry out the increment and the degree and these increment and decrement should be imported from our counter actions so let's go ahead and import that first so import from dot slash dot slash or double dot slash and go inside the context slash actions so I need to get that increment okay I'm sorry from the actions we need to get the counter actions come on simple mistakes counter actions and here I need to get the increment and I need to get the decrement so now we have those two methods and we're having this map map dispatch to props and have the map State over here so now what I need to do is basically we are getting the state and we are getting the dispatch method and I'm going to send it as the exact property of this component so I'm going to send that count and I'm going to send the increment and I'm going to send the ticket so whenever the comfort is being mounted so this state and this methods its needs to be mapped with this component so to map these two object to this component what you need to do is we need to import an object where we need to import a class from the Redux Imports we have a book called connect which helps you to map these two states and the actions to your component so react read X so I need to get the connect method so connect C is the small letter and using this so what I need to do is right before here I need to use that connect and then I need to send the state and I need to send the dispatch method so connect map state to props and map dispatched to props and I need to connect these two things with this component so wrap it Insider normal brackets save the changes now these things will be used as a normal props of the stop connect so let's go ahead and do that stuff now what I'm going to do is basically we have this two different buttons so when I click plus what I need to do I need to change the energy increment the count and instead of displaying the dummy record over here I need to bring that found so let me bring the count so that's the state value initial State value what is the state value that we do have zero so the initial State value is displaying still that means our read access working perfectly at this point we are getting any error so please check the console and and uh drop that command drop it in the comment section I will help you out okay so here I need to add on click event or on press okay so we need to get the on press event whenever I'm pressing it I need to call this increment method and whenever I'm pressing this one on press I need to call the decrement method all right so now let's see so now if I click this state will be updated and if I click this state will be reduced to 1. just like that so now our redex store it's been successfully created and the actions and everything will is properly mapped as its own property so I don't have to create use the dispatch hook to dispatch each and every actions whenever I'm creating that so that is a TDS process the easiest and the best way to create it is mapping this state and the action methods to our component this is the best approach to work with the midax so I hope you enjoyed this session and if you're having any questions in this tutorial please drop that questions and inside the comment section I will help you out and stay tuned I'm coming up with a different project in the next video

Channel: Vetrivel Ravi

Views: 6,840

Keywords: react native, react native app, react native for beginners, ReduxTutorial, ReactNativeExpo, StateManagement, ReactNativeDevelopment, ReactNativeApps, ReduxBasics, ReduxArchitecture, ReduxActions, ReduxReducers, ReactNativeStateManagement, ReactNativeRedux, ReduxMiddleware, ReduxDevTools, ReactNativeBestPractices, ReactNativeCodeExamples, ReactNativeDevelopmentTips, ReactNativeTutorial, ReactNativeProjects, ReactNativeDevelopmentTutorial, vetrivelravi, expo projects, codewithvetri, react native tutorial

Id: F3lE189w4r8

Length: 25min 3sec (1503 seconds)

Published: Wed Jun 14 2023