Debug RTK Query Applications with the Redux DevTools Chrome Extension
RTK Query is built on top of Redux which has the huge benefit of utlizing the Redux DevTools. Every RTK Query operation is represented with the actions and state modifications that happen in the DevTools.
There's also RTK Query tab in Redux DevTools so that you can take a detailed look at the various queries and mutations you have going at any given time.
In this lesson you'll get a basic overview of the Redux DevTools and how it works with RTK Query.
Instructor: [0:00] Go to the Chrome Web store and install the Redux DevTools extension. Open up our dog's website and down in the Inspector window, you should now see a tab that says Redux. Refresh the page one time to make sure that it's initialized. As you start to hover over things, you'll notice all sorts of actions being fired off into the Redux store.
[0:19] This is because RTK Query uses Redux internally, and so everything it does shows up in the Redux DevTool. If you scroll down here, not only will you see the actions that are fired off which you can inspect carefully, you'll also see a special tab for RTK query specifically, so that you can see all the queries that are being fired off.
[0:38] Let's go into My Dogs and click delete dog, you'll see remove dog shows up at the bottom. If I go into contact, type test@test.com and hello world, you can see my contact shows up there at the top. You can click into there, see all the different actions that get fired off for particular query, and you can go back to the Inspector window and see really all the different things that happen with Redux.
[1:01] Even if you don't normally need to reach into the Redux internals, there's a lot of benefits of RTK Query being built on Redux. One of them, of course, is having access to this fantastic DevTool.