Using Redux Dev Tools
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:00] Hi welcome back to the fact that in this guy I want to show you how do you apply to get tools to our applications. We can use them. All right. So if you go to your browser and Google Reader stuff to us around the third result or around there should be the REGEX dev tools Chrome Web Store. It's not there and you can't find it. Just get to the Chrome Web Store and search the store for redux dev tools should be the first one remote death. I read that stuff tools and had a queue crawl out of the chrome right now with that added We can go from there. Saw an exit out of this and the app and then right click and reload your browser just to make sure you're on it and select the that tools and open it up. So with this open it can you give us access to a visual representation of our application state. So right now it's just stated but we're clear we have and we know that there's more seating here. Why is it just a swing state. Let's try going to newsletter Shinsho or our archived. The food fetch Futch when we got here and it's not displaying so what we have to do to get this working is outlined in here. Create stories from our constant so we need to add a line here along with create store but we can't because it's not wrapped in parentheses so you don't see why. So first thing I want to do is create storing some parentheses and then write to the left of it. [00:01:49][109.2]
[00:01:51] Make sure you type in that to see red to the left of it. Let's open another set of parentheses. Now in here we just have to type in one line and it's pretty simple. It's basically just a kind of like an if statement ternary expression I forgot what it's called. Operator. So basically when we have the same window depth tools extension so if we have the windows defter extension question that we're checking in the condition that we want to return windowed dev tools extension and call that as a function if not just return function. Okay so let's close that off now. There will still be an error. And let's just let's just cut this out just so we can see this clear. That's right. Now we need to compose these together so in our import creates an apply network. Let's add another person and call it compose. Now let's wrap these two things the window down tools and create store with compose compose parentheses and then all the way to the end of the pregnancy. Okay. Now that should be good. Let's go ahead and see if we have access to our application stating it reloads we are relaxed that tools open and you want as we have our action here fetch newsletter archive. Now we have our data. You're on the right or steam we can click on Newsletter and it shows our newsletter. State has our archive of all items and as our latest item and so on you get the point. Here's our state. You can also click on action and it will display just what the actual payload was and what it returned. [00:03:37][106.4]
[00:03:39] You can also see the difference in state. So we had nothing before. So basically it's going to shore up higher education State Farm to add an item or add an item and it save and then going here. We have a lot of form changes since we have form implemented but you can ignore it now. If you select on new fetch use archive you'll see the difference and it's just the latest item in our archive. Our newsletter rotis. OK so let's go ahead and let's exit out of this and let's head over to Bethesda over to Ryan. Whatever it is called for club crop is called support request my support request. OK so Robert you're looking around the opening of and we don't have anything because we haven't managed or see it that way and that's when we're going to get into. That's what we're going to get into in the next guy is saying our info box in state. And real quick let's just set up my producer and see receipt in there. So we have our end users here. We need to put our support requests reducer and next on us. Right now we only have these lines so let's just call this one support requests or support request numeracy support request reducer and it should Olimar if it doesn't Harmondsworth just have Newport support request reviews or support requests for Future Flash. Of course say that let's go to the app let's open up our dev tools and see what we get. Okay initialise lets say actions the state and we support requests right here. We have a selected piece of data that is pending. [00:05:37][118.2]
[00:05:39] We go to where you can see that introducer right here pending in our newsletter Release Are we ever archive Leaside fetched item. And again you can see that here in our state newsletter archive. Latest item fetched item support request selected. Okay with that tool set up an R support request for user in our reproducer combined with our other users we now have access to a really nice tool that we can view our state with out console logging 500 billion. Council wants to cancel which is really nice so lets go ahead and commit our code so it gets does get. Good comment and let's just say how did we get that tools and connected it support requests refuse to reduce. Okay. Catching the next guy where we will hop into managed changing the state of our selected box so you'll also notice whenever we click on this it actually changes it because that's what we did in the last game. So if we click on one of these it changes depending we click on it it changes it in progress and you can view the individual action right here when you click on these and it's pretty. If you also want to look cool like your code and like I do on time I think I'm cool so I opened up the chart and it's really cool to Gawker or some junk. Basically it's got this neat little treat here and whenever you change a piece of steak it's going to move around and make you an even cooler. So I guess it's not going to be that with us right now because we're only modifying one piece. [00:07:30][111.2]
[00:07:30] If we got something like little house for 30 time slash the newsletter it might make a cool. Well watch this. Bammer cool just out of all of those cool things with all these cool things up. Looks like another language. Anyway that's what that is. It's pretty neat. It shows each individual I read that rules are extremely helpful and this is just some common sense that someone made which is kind of cool of you. But let's head back to support requests and we've already committed our code. So let's get into the next guy where we will let's see where we will start on the content component the request content component where we will fetch our support request from the server and we'll go from there. Saw catching the next guy. [00:07:30][0.0]
[445.1]