In the last section we got started with some boilerplate set up for application.
We created our app component and then we referenced that inside of both of our index files.
I then started my simulator and as I kind of expected Yep we've got a big error message expected to
reduce or to be a function.
So we created our redux store right here but we never actually provided it a default reducer.
So remember inside of all redux applications you must provide at least one default reducer or just something
so it can run and say OK here's my starting state for my application.
So let's go ahead and create that default reducer and then wrap up all of our setup.
So all of our reducers that we create for application will be placed inside of a folder inside of the
SIRC directory.
So inside the S or C directory I'm going to make another new folder called reducers and inside of there
we'll create index.
Yes.
And then this will be where we kind of remember wired together all of a reducers with that combined
reducers call.
So at the top we will import combine reducers from redux then we will export default combine reducers
and right now we do not have a producer.
But again it is required that we have at least one in our application some going to make a dummy reduce
right now just just a dummy reducer just to get the ball rolling.
So I'm going to come up with some just you know imagine name for a douceur.
I don't know let's call it a banana.
And by default it will always return an array.
I will then import that reducer back into my app file.
So at the top I will import reducers from reducers and then we'll pass those reducers to the create
store called.
So now we've got one default reducer wired up to our application and we should at least be able to get
past this error message
and see what else we got.
OK.
Very good.
So now I've got that very classy Hello thingamajig on the top left there very classy I know.
So we going to replace the you know don't worry we'll replace on just a second.
There's just one more piece of setup that we need to do.
Of course because we're using firebase for authentication and this app again we need to set up our default
firebase configuration.
And we also need to make a new firebase project over on the firebase console.
So we'll do this in two steps.
The first we're going to do is install the firebase javascript library so at the command line inside
of my project directory will NPM install dash dash save firebase.
Well that goes.
I flip over to my browser.
I'm going to open up my firebase console which I ever so helpfully just seem to have open right here.
You always want to go pop it open yourself and I'm going to make a new project for myself.
So I logged in and out the console and it created a new project.
And I think I'll call this one.
You can call it employees you can call it manager or whatever you want to call it call it just manager
and I'll create the project.
So we need to do two things right here.
We need to make sure that we enable authentication for app and make sure that we say hey email and password
sign is a valid way to get started here.
And the other thing we need to do is copy paste that default set up the project linking stuff all the
code and all that kind of good stuff.
So let's get start with the authentication first.
On the left hand side will find the auth section and we'll set up our sign method.
And again you know we've gone through this before.
You have to specifically say yes I want to enable email and password authentication inside my application
so we'll click on email password enable it save call that's you know pretty much it.
And then on the top right again we'll hit Webbs set up here is all the default information to get started
with firebase insider application.
So I'm going to just copy this big block right here.
I'm not going to get the script tags.
I do not want the script tags I just want the config and the initialized outcall it's all copy it and
then flip back over to my code editor.
Now in the past we created a separate file to house our firebase setup where you place this code to
a large degree a large extent.
It's really up to you.
This time we're going to do things just a little bit differently just for the sake of doing it differently
just to show you hey you can do it this way too if you want to create a separate file that's totally
fine.
But this time around I can say that inside of my apps components will mount I'm going to place all that
initialization code song and do my copy.
By default we get a VAR here.
Of course we want to prefer a concert instead.
And then I also get a lot of complaining about single quotes first double quotes Elisha's go ahead and
fix that up real quick.
And finally we need to make sure that we import the firebase library so that at the top I will import
firebase from firebase and of course you know we just install this at the command line two seconds ago.
Looks like that's all done and stalling so we should be good to go.
So this time around rather than creating a separate file to our firebase config.
I just said you know what I do there's nothing special about firebase here firebase is tightly coupled
to my application as soon as my app is about to boot up.
I want to make sure that the firebase config gets loaded up as well.
So I don't have a separate file you can really toss the stuff wherever you want.
Just make sure that it only runs one time.
Otherwise you can see a error message pop up on the console complaining that you know you're trying
to initialize to firebase applications.
The one thing that I want to point out to you just to make sure we avoid any early errors here do double
check the spelling on component will mount here.
A very common typo I make personally and I actually just made it two seconds ago as a capital I I do
that all the time just you know just all those things anyways.
You know we're very well familiar now with the lifecycle method component will mount.
So I think everything is good.
Let's do a quick refresh.
Make sure we don't get the error message
because we are now importing firebase into our project.
It's going to take our bundlers just a little bit more time to reload in the simulator.
Any time you import a library in to react needed it has to basically pull that thing until the bundle
and so it takes a little bit more time to refresh.
Anyways it looks like our refresh is successful here.
So I think we're all ready to go with our next application.
Let's let's get started in the next one and start working on authentication.
So I'll see in just a second