We're all done with authentications side of our application we're now going to start to very quickly
start to work on giving our users the ability to create a new stream by putting this form together right
here.
Now as soon as we start talking about forums and redux we're going to begin covering a new library called
redux form redux farm is a little bit notorious for being just a tiny bit challenging to understand
but the only reason that is challenging to understand is that it's hard to understand what redux form
is doing inside of your redux store.
Now in order to make the process of learning redux form a lot easier I can't tell you about a little
extension that we're going to use to make debugging your redux application a lot easier if you install
this little extension inside your browser and wired up appropriately.
It's going to allow you to take a look at the data inside of your redux store very easily which will
make learning redux form really straightforward.
So we're going to put a link on the screen.
Here it is right here.
So I'm going to copy this link and open up a new browser tab and jump over to it.
OK.
So when I say extension I really do mean an extension.
This is a Chrome extension right here.
You can use this tool either with Chrome as an extension or also with Firefox as well.
This is a browser extension that is going to allow you to very easily debug your redux store.
You can very easily understand that or what data is inside of it.
And it also lets you do a couple of other interesting things very easily.
Let's first figure out how to wire this tool up and I'll show you exactly how you can use it inside
of your application.
And we're going to also use it quite a bit when we start putting redux form together.
So the installation directions for this are down inside the read me of this get have repository it's
all find the installation section right here.
You'll see directions to install this for the Chrome browser or for Firefox.
If you're using any other browser.
Unfortunately there is no support for it.
But I would still really encourage you to make use of chrome or Firefox for the rest of this application
that we're building just because this tool is so incredibly useful.
So to install this with chrome or Firefox you click on the appropriate link so this will take you to
the Chrome store or the Firefox store where you can easily click a button up your on the top right hand
side to install it into your browser.
Once it is installed you're going to see a little kind of I don't know satellites or solar system icon
up here on the toolbar up here.
That's the redux tools icon right there.
So once we get that thing installed we then have to add a tiny bit of code to set up our application
to hook in to these redux stepped tools or that will scroll down a little bit more and we're going to
find the section marked advanced store setup right here.
So essentially all we have to add in is what you see in the green text.
We're going to import a little helper from redux called compose and we're also going to apply the middleware
as well.
We don't have any middleware right now but we will eventually.
So we're going to wire up our application assuming that we're going to have middleware at some point
in time.
OK.
So to Wired this thing up I'm going to go back over to my code editor and find my root index such as
file so inside of here I'm going to find my redux import and I'm going to get apply middleware and this
little composed function as well.
Then right above my store creation right here I'm going to say Konst compose enhancers
equals window dot underscore underscore.
So that is two underscores right there.
Make sure you have two as well.
Redux dev tools extension compose and then underscore underscore
I'll then put down a or statement or or operator and I'll say or compose and then finally on my create
store call right here I'm going to get myself a little bit of space by expanding the call like so I'll
make sure I get a comma after reduce hours and then as a second argument I'll say compose enhancers
apply middleware and I'll close off the call like that.
So we do not yet have any middle where we are going to eventually have redux thunk installed in this
project but we have not installed it just yet.
Nonetheless we can still call applied middleware right now and at least get ready for that call or for
redux thunked to be added.
You can call applied middleware with out any arguments and you're not going to see any error message.
So no issue with this whatsoever.
Eventually we will install redux.
And then we can just throw in dunk like so and that's pretty much it.
All right so going to save this and I'll flip back over to my browser and we'll test out the redux dev
tools.
All right so I get flip back over I'll refresh the page and then once I refreshed the page I should
see that little icon for redux dev tools appear kind of come a light I should see some colors inside
of it.
You'll notice it's slightly green whereas it was kind of gray before.
I can then click on this thing and it's going to expand the dev tools menu right here.
Now something I really recommend you do is click on this kind of middle icon down on the bottom left
hand side that's going to pop these tools out as a separate window like so.
All right.
So let's take a look at this panel right here and get a better idea of what's going on in general.
There are two features that you're going to be using very frequently with these dev tools.
First off if you find this little selector right here of action state diff and test click on states
like so when you click on that that's going to show you the current state inside of a redux store.
So I see that I have my Auth. property coming from the author reducer and that has the is signed in
flag in my user ID as well.
So with this tool I can very easily see all the data that is sitting inside my redux application the
other feature that you're probably going to use very frequently is the left panel over here.
This is a list of all of the different actions that have been dispatched to your redux store.
Now the thing that is really cool about this is that we can very easily kind of jump back in time.
Let me show you what I mean.
I'm going to come back or to my application and I'm going to sign out and then sign back in really quickly.
OK.
So now on the left hand panel over here I see three different actions.
I see a sign in sign out and sign in.
These are the three different actions that have now dispatched inside of my store.
The first action right here was dispatch when I first booted up my application inside the browser.
And then I see the sign out and sign in it from me simply refreshing or to me signing out it's like
clicking sign right there and then signing back in as I did just two seconds ago.
Now the part that is so cool about this is that if you hover over say sign out right here you'll see
this button jump on the right hand side I can click on jump and the state panel over here on the right
hand side is going to change to reflect the state inside of my store.
At that point in time.
So when I had dispatch sign out I now see the state that was inside my store when I had just dispatch
sign out and process that action by all my reducers.
So using this tool we can essentially jump around in the history of your application and get a better
idea of exactly what happened at every point in time.
Now you'll notice if I do a little bit of rearranging here when I click on these different actions or
the jump button for each action I'm not just changing the state that I see down here in this little
pop up window I'm actually changing the state inside of my real redux store.
So if I jump back to say sign in right here you'll notice that the UI changes to reflect the signed
in status.
Well I can now go back to being signed out and that button goes back to saying sign in.
Because now redux thinks I no longer sign into the application.
So as you might guess this tool is an absolute amazing thing to use any time that you're trying to debug
a redux application.
There are even some more features that are even more useful than what we've spoken about so far and
I'll show you some of those other tools and a little bit for right now I want to show you one other
thing that is kind of interesting.
Personally I think it's interesting anyways aside from New browser tab I'm going to navigate to air
b and b dot com and so this is the air in the home page.
I'm going to flip back over to the dev tools over here and then I'll find the drop down on the top right
hand side.
I'm going to select Air B and B.
So at present this might not be true by the time you watch this video but at present European B has
redux dev tools hooked up to their redux store as well and it is publicly visible.
So if you come over here to Air B and B.Com you can actually take a look at your redux dev tools and
you can explore all of the different state that exists inside the redux store that is created by Airbnb.
Yes Aramean uses react and redux internally.
So just for learning sake you can take a look at all the different pieces of state that airband be uses
and could give you a better idea of how you might want to structure your store or your state for a more
complex application.
Now Air B and B is not the only site that does this.
You can find many other sites online that expose redux dev tools as well and you can take a look at
all the data that is stored inside and give you a better idea of how to structure your own application.
Now just so you know if you ever seem to be kind of stuck with your dev tools looking at some other
page or some other product and you want to go back to looking at your redux store you can go back to
the dropdown appear and change it back to react up.
And now I see my piece of state again.
OK.
So like I said we're going to be using Reducto tools quite a bit moving forward and that's going to
make learning the redux format library a lot easier as well.
Now that we understand how this works we'll take a quick pause right here and we'll start working with
redux form in the next video.