React Native / Expo: Redux and Firebase Starter Tutorial

hello ladies and gentlemen and this video I show you how to add Redux to your Expo firebase application Redux is a library that's commonly used in react native applications to store and share data across screens it can be a little bit tricky to set up at first but once you get it configured it works very well and can be very useful as you can see I've got my application up and running and the point where we're starting at is the expo firebase off starter application which you can find at this github repository or you can follow along with the expo firebase off the starter video now before we begin one small thing I want to do is clean up this test screen a little bit so I want to delete the test component and the hello text that we added in a previous video so I'll delete those out and save it and it looks nice and clean now before we can use redux we need to install the Redux library and in fact there are three libraries that we want to install for this video the way that you install packages is you type NPM install - capital s for save and then list out the libraries that you want install which for us is going to be redux space react redux and redux - thunk and I'll explain what each of those does throughout the video so while that's installing we will set up our project directory to use Redux the way that I do it personally is I add a new file a new folder called redux and inside of that i add a file called app - redux Jas and I actually put all of my Redux stuff in the same file if you finally look at tutorials online you'll see that often people split it up into different files but I personally think it's more convenient to have everything in one file if your application is very complex it might make more sense to split it up but for me I like to keep everything contained in here now we'll be adding to this file many times throughout the video but there are a few things we can go ahead and get started on immediately so the first thing we can do is import some libraries from redux so we will import create store and apply middleware from redux and let's also import funk middleware from redux - funk now there are many components that we will piece together in a REIT in a Redux application and the way that I like to visually separate them as I create a couple lines of comments just to make it a little bit easier for me to see the first component that we want to add is our initial state and all this is is a data structure that represents the initial state of the application so you might want everything to be blank and what what we'll do is create a variable called initial state and whatever you want in your application you will add here so just as an example we'll put a favorite animal variable and I'll call it duck all right the next component is called your reducer and the reducer specifies how the state is changed based on various actions that we're going to add later so I'm going to put a comment here called reducer and reducers are very easy to create you just make a variable called reducer if you want and give it a state that you set to the initial state and an action and we will actually fill this then later but this is going to take an action and figure out what it needs to do to the state based on that action all right the next component of a Redux application is the store and stores are also easy to create so we'll create a variable called store and this is where the create store function that we imported from Rita comes in handy so we call create store and we give it our reducer that we just created above and apply middleware with func middleware and you don't need to worry too much about that right now that will come in handy later on in the video and we're going to need to reference our store in other places so we will export the store here as well alright that should be enough to get us going for the time being and now we want to actually connect our application to redux so we'll open up our app j/s and we need to import a few libraries the first thing we're going to import is something called provider from the react - Redux library now this provides us our application with data and the next thing we want to import is the store that we've just created from our Redux file which is in redux slash app - redux so save that and make sure everything is working and then to actually connect it we come down here to our main application and we add the provider component and we provide with a property called store which is the store that we created and now our application should have access to redux so to test out that our application is connected to redux let's try to display the value of favorite animal inside of the test screen now before we can do that we need to take a look at the reducer what the reducer does is it takes an action and it manipulates the state based on that action so you might have an action called set favorite animal and you might do something like this if action type equals set favorite animal then you would say state dot favorite animal equals something and we'll add a few actions later so but for now we're just going to return the state as it is we're not going to make any changes to it we'll just return it as it is which should be our initial state because if we're not making any changes to it it will remain at the initial State so now whenever we use our reducer it will return the state now we'll open up our test screen and we want to connect the test screen to redux so in order to connect it we need to use the connect component from react Redux and we also need to modify our class just a little bit instead of exporting it right here we're going to delete that and just declare a class test screen and down here we're going to export the class we'll say export default and we're going to use the connect component that we just imported now connect takes a couple of parameters that we will define in just a second let's call the map state to props and map dispatch to props and then we pass in our screen which is test screen ok now let's define map state to props and map dispatch to props and we'll do it at the top of the class or the top of the file I will create a variable called mat state 2 props and what this does is it takes the state from reacts and applies it to your components properties so you can return an object and whatever properties you put in your object will be available in the components properties so we want to create a property called favorite animal and the value of it is the state dot favorite animal which if you recall Maps back to here so we have a in our in our Redux State we have a property called favorite animal which initially is set to duck and we're now adding that value to our components properties map dispatch to props works the same way except it takes a dispatch which we'll talk about later and also applies that to your properties and since we're not working with it right now let's just return a blank object so this means is now our test screen should have a property called favorite animal whose value is the state dot favorite animal value so if we try to display that in a text we can do it like this text this dot props got favorite animal and the text and we'll save it and refresh and see now we see we have the value of duck and if I changed my favorite animal to lie and saved we now get lion here I'll switch you back to duck all right now let's allow the user to change the favorite animal so let's give them a text input and a button and when they type into the text input and click the button it will update their favorite animal so we'll get our text input here and a button button will be called set favorite animal and when we press it it will call this dot on set favorite animal press and up here we will create that function on set favorite animal press alright and for our text input we need something in our state to hold the value of the text input so let's add a constructor here remember you need to call super props and we set our state like this and let's give our state also a variable called favorite animal and we'll initialize it actually with this dot props dot favorite animal all right and down here in our text input we'll set its value equal to this dot state that favorite animal and when the text changes it'll give us a function with the text value and we'll call this dot set state and we'll set our favorite animal to the text of the input let's save that and make sure everything's working there's our text input it's a little bit hard to tell so why don't we add a border around it border width of 1 we'll give it a width of 200 and a height of 40 all right so here's our text input in as you can see it's got the initial value of our favorite animal and once we implement this function hopefully when we click set favorite animal it will set our favorite animal so this is an opportunity for us to use an action creator which is another concept in redux so if we switch over to our App Redux file add another section called action creators and these could be functions that create actions so we want to make one called set favorite animal and it's going to be a function that takes a favorite animal as an input in the way that this works is it returns an object that will be used as an action in our reducer which you'll see in just a second so we want to return an object and it's a redux convention to give every action creator a type so our type here will just for convention will will always name it the same as the function name so we'll say the type is set favorite animal and and you can add whatever properties you want so we'll give it a value which is equal to the favorite animal and we also will want to reference these another files so let's export set favorite animal like so now up in our reducer what we were doing before was just returning the state but now that we have different actions we need to do some logic based on those actions so another common redux pattern is to use a switch statement and switch on the action dot type and we'll say case set favorite animal so if that was the action that we were given we'll do something there and and we'll for our default case we will just return state and we can do this get rid of this now because the default will occur if the any of the cases and the switch are unsuccessful so in the case of set favorite animal what you need to do is return a new state that's updated based on the action that you are given so in this case we want to actually update the favorite animal so the way that you commonly do this as you return an object and use this dot dot dot state which kind of gives you all the values of the state and then when you do a comma you can update things in there so we'll update our favorite animal and the value is going to be the value from the object so it's action dot value like I said you can name this anything you want you could have named this favorite animal if you'd like and in this case would be action dot favorite you know but I kind of like value so I'm gonna keep it as value right now we're good to go now whenever we call this set favorite animal action creator it should go into our reducer and update our state's favorite animal so back over on our test screen now we need to import set favorite animal from our Redux file so that's redux slash app - redux and this is where we start to use our map dispatch - props so what we want to do in here is we want to actually add our set favorite animal so again whatever properties you return this object are going to be available in your components property so we'll just name it set favorite animal and this is going to be a function that takes some text and it's a little bit confusing but what you do is you call dispatch which is what we're given here and then you call this set favorite animal function this is the one that we actually imported up here and we give it the value that we were given this function call which is text so that's going to do is that's going to dispatch this action it's going to call this function and it will return this object go into our reducer let me just sort of figure out that this is the action we call based on the type and it will update our state with the favorite animal being the value that was given and like I said I know it's a little bit confusing so if you just want to copy the syntax here and and not worry about it too much that's perfectly fine all right so we should be set up now we should have a property in our component called set favorite animal so when we click on set favorite animal press what we can do is this dot props dot set favorite animal and the value will give it as this dot state dot favorite animal we'll save that and we should be able to test it out now so if I change duck to lion and I click set favorite animal now you see that our display updates to the favorite animal now when I was first learning this I was very confused because there are so many different pieces that you got to connect together in order to use redux but like i said once you have it all set up it works very well and it's a great way for you to get data shared across all of your different screens without having to pass them around as properties let's do a quick recap of what we've got so far just in case you got lost and and like I said if you're still lost you can just copy this code and figure out how it works without necessarily knowing all the mechanics of it so up here we've imported some libraries from the various redux libraries here we've specified our initial state and you can set whatever data you want in this data structure and that will be the initial state of your redux data store down here's the reducer which takes actions and updates the state accordingly and we can maybe reformat this make it look a little bit nicer so we have one action so far which is set favorite animal and what it does is it returns a new state which has what this does is it gives you the current state and then this kind of overrides the favorite animal property of that state and the way that it overrides it is it takes the value from the actions given and overrides it down here we have our store which actually contains all the data it's just a data store and down here we have our action creators and the one that we created so far is set favorite animal and it's a function that takes a favorite animal as an input and it returns an object with a type called set favorite animal and a value of favorite animal and again this is used up here in the reducer that type helps us figure out what kind of state update we want to do and the value helps us figure out how we actually want to update the state over here on our test screen we connected this screen to redux by using the connect function and we passed in map state the props and map dispatch to props as well as our test screen what these two functions do here is they set up the properties of your component based on things that are in your Redux datastore so map state the props takes the current state of the Redux datastore and sets any properties you want for this particular screen you can do as many or as few as you'd like in our case we wanted to see the favorite animals so we added a property called favorite animal and set its value to the State DOT favorite animal map dispatched a props does the same thing except it takes the redux dispatch which allows you to dispatch action creators which is what we did here we created a property called set favorite animal which we can call in our component from the stop props death set favorite animal and give it the text of a favorite animal and what it'll do is it'll dispatch the set favored animal action creator that we imported here giving it the text that we supplied and one more time what this does is this goes through here calls the action creator which creates this action object the dispatch sends it to the reducer and the reducer uses the action type to figure out what we need to do and the action value to figure out how to update the state very confusing I know but hopefully you were able to follow along with that now since this is a firebase application I want to demonstrate how to integrate firebase and redux there are a couple challenges of the firebase first since it's over the network we're dealing with asynchronous communication and second since firebases and is a real-time database we'll want to update our datastore anytime and firebase updates so first let's jump over to firebase and create a little bit of sample data for us to work with so I'm in my project I'll go to database get started and I want to add a node called person and give it a property called first name of Paul and an additional property last name O'Neill alright so this gives us some data to work with now let's jump back into our code and in our app Redux file let's add a new property called person data so in our initial store we're going to initialize person data to just be a blank object and down here in our action creators we want to create another one called set person data I'm just going to take a person data input and it's going to return a type of set person data and a value equal to that person data and we'll need to update our reducer in case we receive that type of action so we'll add another case here called set person data and we will return our current state but will override person data with action value which again is comes from right here all right now we want to integrate firebase so I put the top here let's import star as firebase from firebase so that we can reference firebase in our Redux file and we'll create an additional action creator and we'll call this watch person data because firebase is a real-time database so we're going to be watching the data for updates so this will be a function we won't take any inputs but you can if you want and in this case we're going to return a function rather than an object and that function is going to take dispatch and inside of this function we will set up our firebase watch now ordinarily you wouldn't be able to do this type of thing in redux this is where the thunk middleware actually comes in into play so because we're applying the thunk middleware right here it allows us to have action creators that are functions rather than just objects so inside of this function let's call the firebase API so firebase database dot ref person that's the node we want to look at and on value it'll give us a function with a snapshot if it's successful in a function with an error if it is unsuccessful so if we are successful we will have a person data equal to these snapshots value which you can get they call on the Val function and then in order to actually update that in our store we will call it dispatch which is given to us as an input and we'll call the set person data action creator that we just created up here with the person data that we just retrieved from the snapshot and for now let's just ignore errors but you could call another action creator that maybe sets an error message or something like that if you wanted I'll save that and make sure everything is working okay all right now we need to go well first we should export these action creators so set person data and watch person data now we have access to them outside of this file and we'll go into our test screen and we'll actually want to import watch person data because that's what we're going to call so test screen will call watch person data watch person data will set up this firebase watch and any time the person data value is updated it'll call this function which will dispatch a set person data action which will then come up to our reducer and set the person's data to whatever the value is so we now have watch person data let's add that to our properties which we'll do right here watch person data it's going to be a fun with no inputs and it's going to dispatch the watch person data action creator alright now that's in our properties and let's come down to our constructor and actually call this function which will initialize the watching of data so we'll say this dot prop stopwatch person data and let's save it and make sure everything works okay and the only way to really find out if it's working is to display that data somehow so let's go up to our map state the props and let's grab the person data out of the state so state that person data and down here let's display the person data so we'll add a text and we'll do this dot props that person data dot first-name and this dot props that person data dot last name save it and see if we get our person data to display so there we have Paul O'Neill and now let's double check that the real-time aspect of the firebase database is working so I'm going to jump over to the firebase database here and I'll change the first name to Steve and this should have fired a change event over here and there you go it has updated to Steve and that's all there is to it for adding Redux to your Expo firebase application like I said I know it can be a little bit overwhelming with all the different pieces you need to keep track of but once you've got the basic structure built in it's pretty easy to add new action creators to add new state variables and to have access to them and your different screens and like I said it's very convenient to use compared to the alternative of just passing data around with properties thank you for watching the video and please subscribe if you'd like to be notified of updates

Channel: ProProgramming101

Views: 16,975

Keywords: react native, expo, firebase, redux, firebase authentication, programming, programming tutorial

Id: _z9DS9gpujY

Length: 25min 41sec (1541 seconds)

Published: Tue Mar 13 2018