‫So I believe I mentioned
‫in the beginning of the section that Redux
‫comes with amazing developer tools, just like React
‫and so let's now install and use those dev tools.
‫And just like with Middleware,
‫installing the Redux dev tools is a three step process.
‫So first we need to install the Google Chrome extension.
‫So let's do that immediately.
‫So Redux dev tools
‫and so then it is this first Google Chrome extension.
‫So I already have that installed
‫but please go ahead and install this one now.
‫So again, just like the React dev tools.
‫Then next up we actually need to also install
‫the corresponding NPM package
‫and so that one is called NPM install
‫Redux dev tools extension.
‫So let's wait for it.
‫That should be pretty fast and there we go.
‫And so now this NPM package gives us one function
‫that we need to use.
‫So let's bring in ComposeWithDevTools.
‫So exactly this one
‫and so now this is gonna look a little bit weird
‫because what we need to do is to wrap this apply middleware
‫in the compost with dev tools.
‫Give it a save and with this we should be good to go.
‫So again, it doesn't really matter why this is the way
‫we have to write it, but well this is it
‫and so now here you should get a new tab for Redux
‫and in case it doesn't show up for you,
‫then just make sure to restart your browser.
‫So let's click there and here are our dev tools.
‫So let's make our window bigger
‫and this whole thing a bit smaller
‫and then let's explore this.
‫So what we need to do here to test this
‫is to dispatch some actions.
‫So let's do that.
‫And there we go.
‫So here we now see our first action that was dispatched.
‫So with the name of customer/createCustomer.
‫And so then here we can see the action object.
‫So again, with the type and the payload
‫and then the state that resulted
‫from dispatching this action.
‫All right, and if we keep going here
‫let's say we deposit $200.
‫And so then again we see the new state that has been created
‫after this action has been dispatched
‫and we can see the action itself as well
‫and let's try that again, but this time converting
‫from US Dollar or actually from Euro to US Dollar.
‫And then what happened down here?
‫So now we do indeed get our two actions dispatched.
‫So first the converting currency action.
‫So this one right here, which will set our state
‫here in the account to loading, right?
‫And then this next one here where we then,
‫after that value has arrived, finally deposit.
‫So it's loading is then back to false
‫and then we see our new balance right here.
‫And so the action that was dispatched this time was 109.
‫Now, okay, let's try another one
‫so that afterwards I can show you the coolest feature
‫of these dev tools.
‫So basically what we can do is to now jump around
‫between these different state transitions.
‫So for example, we can say that we want to jump back
‫to this place right here
‫and so then you see that our balance is back to 200
‫because at this point we only had deposited once
‫and we had deposited only 200.
‫Can also say that we want to jump here.
‫And so then at this point
‫notice how the state is still completely empty.
‫So we have no balance yet.
‫And so yeah, this was basically the very initial state
‫and even cooler than that is that we can even use the slider
‫down here to move through these state transitions like this
‫and so watch as to balance there updates
‫So here in the very beginning,
‫we don't even have a customer yet.
‫So that's when we then input our name and ID.
‫So then we came here, then we deposited for the first time,
‫then we deposited again,
‫which then triggered this conversion.
‫So here then the state was at loading through.
‫Then afterwards we got this new balance
‫and then in the end we got down to 59
‫because of this last withdrawal.
‫Okay, so I think that you can see how this can be really,
‫really useful if you have a lot of different
‫state transitions and a really complex state.
‫So then you can basically time travel
‫between these different transitions in order to maybe find
‫some bug or some problem that you have.
‫We can also actually manually dispatch some actions here.
‫And I think that we have one that is named
‫account/updatename.
‫I'm not sure of this, but let's try.
‫Payload.
‫Let's say test, and then let's dispatch.
‫And well that didn't really do anything.
‫So let's check out our code.
‫So here in the customer slice.
‫Well it's actually called account name.
‫So maybe there's some typo there, but not really.
‫Well for some reason that doesn't work
‫but it's also not really important.
‫So let's just close this here.
‫So you see that our state didn't really change
‫as a consequence of this,
‫which is now leaving me really intrigued.
‫Let me check out again, something must be wrong.
‫Ah, okay, I see.
‫So here we have the correct name,
‫which is customer/updatename, but for some reason
‫then here we have a bug.
‫So here it should also be customerupdatename.
‫So ah, now everything reset.
‫So let's try again with the initial data.
‫Let's just deposit something here
‫and then let me dispatch that action.
‫So customer and then the payload of test.
‫Let's dispatch and yeah, so now it actually updated
‫the name right here.
‫So again, this can be quite helpful if you just
‫want to manually dispatch some actions
‫without having to wire up like some buttons
‫in the user interface
‫and now let me just find a bug here.
‫So let's try to deposit again
‫and so now this will actually create a problem.
‫So notice that when I clicked here, it actually dispatched
‫the action of account converting currency.
‫So that's strange, right?
‫So let's see what happened there.
‫So where is this action here actually dispatched?
‫Well, it is dispatched of course,
‫right here in the account slides right here.
‫However, this should only run if the currency
‫is not US Dollar.
‫But here in the user interface it clearly was.
‫So this means that we have some problem.
‫So let's come to that component
‫and here we actually already can see the problem.
‫So here after we dispatch,
‫so after we deposit for the first time,
‫we then reset the currency back to this empty string,
‫while the initial state is actually USD.
‫So then the second time we try to convert
‫it is not the USD currency that gets into
‫the action creator, but an empty string
‫and so this tool just helped us here a little bit
‫with finding this problem.
‫Now here we need to reload to get rid of this initial error.
‫Then let's try $100 and then let's just try that again.
‫And so now it is fixed.
‫Great, so I think with this you get the gist
‫of how this dev tool extension here works.
‫So if you want, you can play around a little bit more
‫with this and do your own experiments
‫and then once you're done with that,
‫let's move on to the more modern Redux with Redux Toolkit.