React Native Redux Tutorial | Redux Made Easy

what's going on guys and welcome back to the channel and this time we are here with the tutorial of redux and in this tutorial we'll be talking about how it works so first let's understand the flow of redux and then we'll be doing something with that later on so redux is how the way the Redux works I'll explain it graphically here so there is the UI of our application that in which we can interact with we can give us information or something like that so over a UI triggers some action like if I press on any button or like if I give some input and all that stuff so it triggers to some action and then the action is sent to a reducer now the word reducer I don't know why they call it reducer but let's consider it as the handler and it basically response to that particular action that okay the user have pressed the button now what to do now this reducer is the action handler and then the reducer updates the store that where the centralite store is the redux and when the store is updated so then the store contains or the state of our application and the state defines again the UI so the circle is like that that the UI triggers some action the action is sent to the reducer the reducer updates the store and the store contains the state and finally the state defines our UI so this tutorial will focus on the redux and react native and this tutorial is actually the series of tutorials and it's all about combining these two technology now before going any further I just want to say that subscribing to my channel is always free all I have to do is to click the subscribe button and click on the bed icon so you never miss an update now let's get back to the tutorial guys alright so we're back into the original tutorial and here I just want to create a folder called it screens and this folder gonna contain all the screens that they that I used inside of this project so I'm just gonna quickly create three screens so that's gonna be home the welcome screen and then I just wanna add a task so just wanna create the welcome screen first so it's gonna be import react from react and then I'll create the screen with the using the functional components and here I just want to pass props to it and it should return as the this all these stuff so I'm just want to be quickly creating this so because the creating basic layouts is not that much context we should have our focus on more important things so that's how we can create the screens and let's just now implement the react navigation inside of our main app so just wanna import create tag navigator and Tanner from react navigation and then I'll destructure the spec navigator with this cost and then when a screen and navigator that's gonna be navigator and it should be equal to create stake navigator just get rid of this and use the navigation container and inside of that I'm gonna use navigator and then all the screens that we have so the first screen is gonna be named as welcome and the component for this then we will be using it in a moment but let's just make our course super clean so that will just import all of our screens to this index tour chest and then export all of them from here so that we can import everything right from this index door Jess so just import all of our screens here just like that and I just wanna export these now so export and here I want to export every screen so that now our core will be looking much cleaner here so that I can import in just one line just like that import stearic as screens from dart slash screens and then index so all the screens have been imported in just one line and whenever I can create other screens that want to be imported automatically so that's how it works now let's just create some other screens and that's gonna be home and let's be harm and for the last screen that's gonna be air tasks and then create a task screen now the get rid of this header by using the screen options and set the head of Sean to false now this was the basic setup of the react navigation as well as some default some basic screens and now here in the welcome screen I just wanna quickly create some layout that's that will have a text input and a submit button so that we can implement the redux as easy as possible and I'm going to be explaining each and everything so that's the basic the creation of the UI so there the UI should be easy for you because if you are here for the Redux tutorial then I'm gonna assume that you have the basic knowledge of how things work in terms of UI in react native so I'm just when I create a separate folder for the my reusable components so I'm gonna be creating imports buttons and with him right here so import react from react and tear I just wanna use the all these settings and just want to fast forward things so that we have some time for some real things like redux and then the understand the flow of redux so don't don't worry about these these layouts this there's these are super simple and I will add the code inside of te github repository and I'll link down in the description so you can access it easily now this is the layout that we have just created now what do we need to do here is to apply some redox now let's just create a folder and name it store and create a new file stored or yes and here I just want to install the redux as npm install redux and click on enter and when redux is installed here just wanna install react redux npm install reactor redux and click on enter and these are all the things that we've needed now let's just get back to the store doors yes and here I just want to import the create store from redux and then I wanna create a variable count store and then assign it to the create store function but the create store function needs a reducer so let's just create a new for javascript file and call it as reducer dot J's and let's just rename it as reducing ah yes and here the in the reducer torches i wanna export cost reducer there's going to be a function that taking action and store set and action and then it will firstly just create the initial step for the moment so that we have our initial theta here so the user and i leave it as empty and then assign it as the initial state now let's just switch statement upon the action or type so that we can react to different action types and for the default I'll return the stat as it is now in the career store I'll just was in the reducer and then I will export default store so we are done with the store now let's just go to the welcomes door yes and let's just import the connect from react redux so that we can connect of our components so here I just want to create two functions that's one will going to be map stair two props and that should be a function that taking a state and then it will return us an object here and that's going to be the user should be assigned to the state dot user now the second function is going to be map dispatch two props that's going to be taking a dispatch just use the dispatch and here it will return an object here that's going to contain all the actions that must be that must be handled here like adding users deleting users updating users and all that stuff that we want to be using here so for the Eid user I'm just gonna use it as the dispatch method so the type of this would be action types don't add user I just created the action type simply for the sake of convenience you can use it statically inside of the string no matter how you use it it is not a problem then for the last thing that I want to connect these components here and then export default the connected component just like connect component and then I'll pass in the welcome screen here just like that welcome and if I say the changes now I need to refresh my app so that I can see the changes now they just refresh it and it gives me an error right here that says these map dispatch to prompt and what I'm doing here wrong is a choke a that's gonna be a connect method attached to them and now they're just reloaded back again and now we are done with this now what we need to do here is to wrap these all of our Abdur app screen with the provider from react redux so let's just import provider from reactive redux and here just use the provider just like that and then inside used all our order components as a child of this provider and use store as store now here you can see that we are back into our screen here and now we can play with the Redux stuff so that was the basic setup for redux now let's just take it out if we have successfully implemented the redux so in the nation step i'll set the user name as test and here i just want to use that props dot e user dot user name here and you can see that it works fine just like that now we know that or redux has been successfully implemented now we don't need a test as the user name so there should be guest by default so it looks like guessed it should be guests for the new users and now what we need to do is to actually create something like the real it uses the real name instead of the guests so I just wanna use that name by handling that input here so I just want to use the unchanged text and then handle this state by the the button here so just create the handle input method here and this handle and port will do very basic stuff that we've created inside of our dispatch method that is add user so let's just use props toward add user and here I'll pass in the name that comes from our state now let's just create let's just handle it inside of the reducer here so import or as action types from action types and then action types don't add user and then we'll just return the state as it is copy the step using the spread operator and then update the user inside of the state and then also copy the user as it is just update the user name and that's going to be action or payload dot username if I save the changes and now you can see that the test is now updating just by inputting the giving the input inside of the text input and clicking on the pressing on the submit button so that's how it works now we can we can do two actions at the same time like I just want to update the store as well as go to the next screen just like that and here I wanna use the Redux inside of the another screen so just copy these bottom configurations and let's paste it here and just bring in the add connect from react redux and here i'm just wanna bring the connect from react redux and I just wanna update something like the export default and that's gonna be the connect component and then that's when I go for home and just get rid of this add user dispatch so we don't need it here and now it is working now let's just use that the toss you just use the user property from the store does shall be a welcome user and if I give something like that and this is going to give me an error so okay this shouldn't be this because using functional components and if I give it a name here and go to the next screen you can see that the name is accessible here too so we'll be continuing this tutorial in our next videos and I will be exploring redux even more and we'll be using it in our real world to do application thank you very much guys for watching I'll be seeing you guys the next one peace

Channel: Dope Programming

Views: 4,767

Keywords: redux, react redux, redux tutorial, context api, react navigation, react native, react, react native redux, react native todo app, react native tutorial, react native redux tutorial, react redux tutorial, state management, centraised state, redux state management, redux reducer, redux store, redux provider, functional programming, javascript, react native android, react native iOS, react native expo, expo, Expo CLI, redux integration, react native for beginners

Id: Y-er8robptQ

Length: 16min 2sec (962 seconds)

Published: Sun Jul 12 2020