Just like React Redux also has details.
And one could even argue that in Redux, using death tolls is much more beneficial than traditional
react.
How the setup is a bit more complicated, because not only you need to get the extension just like normal
react, you also need to set up a bit of the code.
So we'll do that in this video and I'll show you the benefits of using Redux Deftones.
So in order to get up and running with Redux def those first of all we need to search for them.
I think that will be the fastest way because you'll right away get a link to extensions.
That should be your first suggestion.
Click on it and then get the extension bravely.
Click on Add the Chrome and you'll be good to go.
Or you'll notice that even though we have installed the Deltas, well, we'll have a bit of an issue.
We'll go with inspect notice.
I do have the redux, but then I can see that no store found.
Make sure to follow the instructions.
Instructions are following more.
Essentially, we would need to add a piece of code.
So again, let me go to black Google and we're going to type again Redux Dev tools.
And now in this case, let's look for extension.
So let's look for Riddick's dev tools extension.
That's the one we would want.
And that instead of following the first link, which essentially just gave us an extension in this case,
I would want to go to a GitHub repo, lets bravely click on that.
And we are going to keep on scrolling.
Of course, there's all the installation and everything explained.
But what we are looking for is this piece of code.
And I also want to mention that there is an alternative way we can install the package that does that
for us and essentially as start setting up your middleware and all that, that probably is a better
way.
But in our case, again, we have a simple application.
We're just getting our feet wet with redacts.
So we're just going to go with a simple code.
So that's what you would need to copy.
You have your create store, then you have your juicer and then comma and then window and then whatever
this mumbo-jumbo gibberish that is on the screen.
So let me copy the code, then head back to my text that are the comma copy and paste.
What's it.
And now if we're going to check it out on a bigger browser window, we should have access to our dev
tools and we do.
And as you can see, it has a very, very nice interface.
I can right away see what actions were dispatched.
So notice how two times we dispatch get totals and in fact, we will fix that later on in the video.
But as far as the details notice, we have the actions.
So of course, these would be the actions that were dispatched then.
We also have our state.
So for example, we have our card in total, the amount.
And as something is going to be happening in the actual application, of course, notice again, we
are shown all the actions that were dispatched.
We are shown what is the current state of the state water store.
And we also have this nice chart and all that.
And again, there's many, many interesting things that you can find in their and like I said, one
could argue that they are way more beneficial than traditional react.
And I'll start by checking why I have get totals twice.
So why we're dispatching the section.
And the reason for that is because in the card container, remember, we ran our use of it.
Now the way you use effect works.
It runs after every render unless you set up the dependency array.
And that is exactly what's happening.
That's why we run it twice.
And in order to fix that, I would need to add my dependency error.
So I'm going to add my array as a second argument.
And then in my dependency error, I'm just going to say, you know what?
Call this callback function only if something changes in the cart.
So I'm going to go with card.
Let's save it and we'll see that we only run our totals once.
So only if something will change in the card, then of course, we'll calculate our totals.
What Mr. Stroud notice in this case, I toggle the amount, OK?
I can see that my amount went from three to four, then my total went from eighteen hundred to twenty
four hundred and the last action that was dispatched was getting totals.
Now we're also going to get a warning in our console.
So let me open up my console and you'll see that react.
We use a fact, has a missing dependency issue is the dispatch.
So as a second item in our dependency or I can just pass in a dispatch and that's not going to fix the
totals or at least the react one complain about our setup.
So that's how we can get up and running with Redux Dactyls.