Course Introduction and Application Walk through for RTK Query Basics

Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

The application that we will be working on displays a list of Pokemon and their details. Currently, the data is hard coded and all pokemon show bulbasaur on the details page. In this lesson, I give you a basic walk through of how our app is set up so you can get started migrating to RTK Query.

Instructor: [0:00] Understand the basic data flow of RTK query, we are going to migrate an existing little application to RTK query. This little application shows us a list of Pokémon, and if we click on one, it gives us details. [0:15] The data right now is fake though. No matter what Pokémon we click on, we always look at details for Bulbasaur. Let's take a look at this source code.

[0:26] First, here we have a fake data, a fake Pokémon listing, and fake document detail data. Then, we have our application. Our application either shows us details for a selected Pokémon or the list of Pokémon.

[0:42] As this is not about a router library, we don't have a router, but we just have log of state, which contains the currently selected Pokémon.

[0:52] Then, we have the Pokémon list component. This just takes the fake Pokémon listing data, displays a list, starting at one right now.

[1:01] For each of the Pokemon we have, we display it as a button. If we click it, we will select the Pokemon, which will in turn set the selected Pokemon and [indecipherable] Pokemon details.

[1:19] In the Pokemon details, we also take the fake Pokemon detailed data and display the name, an icon, ID, height, weight, and we list all the types of the Pokemon.