In the last video refactor the app component into a class based component so that we can easily call
an action creator from one time to attempt to fetch our current user the instant our application starts
to load.
We're now going to hook up our app component to our redux store by using the Kinect helper from the
re-act redux library.
By doing so we'll be making sure that the app component can actually call an action creator.
So step one is going to be to import the connect helper from the re-act redux library after we've imported
that will then import all the different action creators from our actions file.
So we'll first import connect from re-act redux.
Then we will import start as actions from dot dot slash the actions file.
OK.
So just a quick review here.
Remember the re-act redux library is all about compatibility between the react and the redux libraries
redux was built assuming that you were not going to use it with react at all.
So to get redux to work nicely with react we make use of the re-act redux Leibert.
In particular we make use of the connect function to give certain components the ability to call action
creators.
So that's why we imported connecter at year.
Secondly we imported all the different action creators from our actions index stopped G-S file.
Right now we only have a single action Creator in there but very shortly we will have many different
ones.
So we're going to just pull out all the different action creators we've defined in there by writing
star as actions which essentially means take all the different action creators we've defined and just
assign them to the object actions.
Reiger So now we'll make use of the connect helper and the actions object to wire them all up to the
app to the app component tongue twister.
OK.
So let's do it at the very bottom.
So here is our expert default statement.
And remember what the connect function looks like.
We say connect we place one set of parentheses and then we place the second set around the app object.
The first argument is reserved for the map state to prop's arguments or the map state to proper function
which we're not going to use on this component so we're just going to say no for that first argument
and then for the second argument we pass in all the different action creators we want to wire up.
So we'll pass in actions like so.
OK.
One last step and then we will be able to pass actually tests inside the browser.
Remember that once we pass in all of these different actions they are assigned to the app component
as props.
So now inside of the app component we can call our action Creator by referencing this props.
And then the name of the action creator which in this case we are named as fecche user right here.
So this stop prop's dot that user like so.
OK.
So this is looking pretty good.
Now the last thing we have to do is make sure that we've got like some way to verify and test and make
sure that the data that says whether or not our user is actually logged in gets communicated to producer.
So I'm going to open up our inducers author douceur file.
So here's the author douceur which is eventually going to be responsible for determining whether or
not the user is actually logged in.
And we're just going to add a consulate statement in here to log every single action that this producer
gets called with.
So now in theory let's walk through the entire flow.
Just very briefly because I know we've kind of talked in theory enough here when the reactor application
boots up the AF component will automatically call the actual creator.
The Creator will make the Ajax request once the request is resolved we get access to the dispatch function
and we will automatically honor our own very manually I would say dispatch in action that action will
be then sent off to all of our different reducers of which there's only one right now.
So just the author douceur and we've got our consul log in there to verify that the actions is coming
across.
So at this point we are really testing many different pieces of this flow many different moving pieces.
So I want to tell you right now that if you get any air or if we don't see the console or anything like
that it is totally fine.
All we got to do is a little bit of trouble shooting because there's a lot of different steps in here
where something could have gone poorly.
So let's test this out and see how to do it.
I will flip back over to the re-act application now my server is not currently running so I'm going
to make sure I started back up by going back over to my terminal.
I'm going to change to the server directory and I'll start everything up with any end run death.
So I'll just let that do its thing here.
Very briefly it should be faster than previous Because I actually just restarted a lot actually just
restarted my laptop and usually runs much faster after that.
So let's watch the developments server start up.
Awkward pause.
I know.
Awkward pause.
OK so it looks like we've got a little bit of a warning here it says fetch user is assigned a value
but never used again.
Recall that fetch you are this right here is just saying hey you actually like created this variable
but didn't use it.
This is completely fine right now.
Totally fine.
We will just go over to our actions indexed index j s file.
You'll notice that I assigned Fettes user to the variable fetch user.
You know I assign actual action Crear by never actually export it from this file.
So let's make sure that we actually export it by saying export Konst fetch user.
So we just forgot the expert you are there.
So now if we save this we should be able to go back over and not see any error messages or anything
like that.
I think they were good to go.
OK.
So now back inside the browser I'm going to refresh the page.
So we really go from scratch.
Now we see for console logs here one console log from every action that comes into that reducer.
The author douceur.
Now the first three are a part of the redux boot up process so we don't really care about these.
We really care about the fourth one which is going to tell us whether or not the user is signed in so
we can look at the action.
You'll see that it has a type fetch user.
So it definitely appears that redux thung worked correctly.
We definitely made the request to our back and server.
And then after the request was completed we dispatched an action which was sent directly to all of our
different reducers.
Now if we expand this thing and look at the payload object you'll notice a couple of different properties
in here.
So this is the Axel's response object.
That thing has a property data which communicates back the actual song that the server sent to us.
So if we expand data right here I will see right away my actual user model.
So here's my Google I.D. Here's my user ID and that's pretty much it.
We are definitely now able to ask our server whether or not the users logged in.
Now before we pause a video if you don't see any data here just don't pause the video.
I want to be really clear.
If you do not see any data right here like if it's just an empty string that is totally ok it very likely
means that you are just not logged in to the Express side of the application.
Remember you can only always manually test to see if you are logged into the application by going to
localhost Colan 5 0 0 0 0 and flash API slash current user.
And when I do so I should see my current user appear on screen.
So if you do not see your current user right here and I can show you exactly what you probably see I'll
go to API slash log out which remember logs US-Saudi application.
So I'm now considered to be logged out and now if I refresh you will see a payload with a data of empty
string like so which means no we are not signed in.
So if you see that that means you're not logged out.
And remember you can always log back in by manually going to localhost five thousand off slash Google.
So I'm now logged back in even though I see this message right here.
And if I refreshed the app again I now have a payload with the data property of my user model.
Cool.
So looks like everything is working out successfully.
Now I want to tell you if you have any errors at this point totally fine.
Hop over to the discussion post a screenshot let me know what's going wrong.
Let me help you solve the issue.
OK.
Now I think that we've done pretty well at this point.
The next thing that I want to do remember I want to.
Well I want to take a break obviously but when we come back we're going to Reflektor our user action
creator to make it look a little bit nicer than what it looks like right now.
So let's take a quick break.
When we come back we're going to factor this action creator and make sure that it looks a lot more legible
than it looks at present.
So I'll see you in just a second.