Overview
https://redux-toolkit.js.org/rtk-query/overview
RTK Query is a powerful data fetching and caching library built on top of Redux Toolkit (RTK), which is a popular library for building scalable and maintainable React-Redux applications.
RTK Query simplifies the process of fetching data from APIs by providing a set of hooks that abstract away the details of making HTTP requests and managing the state of the data. It also provides a caching layer that reduces the number of network requests, improves the performance of the application, and minimizes the impact of network failures.
RTK Query also comes with many advanced features like optimistic updates, pagination, polling, and deduplication, which makes it easy to handle complex scenarios when fetching data from APIs.
Overall, RTK Query is an excellent library for managing data in React-Redux applications, and it can significantly reduce the amount of boilerplate code needed to handle data fetching and caching.
Example
Here's a simple example that demonstrates how to use RTK Query to fetch data from an API:
First, you need to install the necessary packages:
npm install @reduxjs/toolkit rtk-query react-query
Next, you can define a new API endpoint using the createApi
function from RTK Query. This function takes an object with two properties: baseQuery
and endpoints
.
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
const API_URL = 'https://jsonplaceholder.typicode.com';
const api = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: API_URL }),
endpoints: (builder) => ({
getUsers: builder.query({
query: () => '/users',
}),
}),
});
In this example, we're creating a new API endpoint called getUsers
, which retrieves a list of users from the https://jsonplaceholder.typicode.com/users
API endpoint.
Next, you can use the useQuery
hook provided by RTK Query to fetch data from the API:
import { useQuery } from '@reduxjs/toolkit/query/react';
function UserList() {
const { data, error, isLoading } = useQuery('users', api.getUsers);
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<ul>
{data.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
In this example, we're using the useQuery
hook to fetch data from the getUsers
endpoint. The useQuery
hook returns an object with three properties: data
, error
, and isLoading
. If isLoading
is true
, we show a loading message. If error
is not null, we show an error message. Otherwise, we render a list of users.
That's a basic example of how to use RTK Query to fetch data from an API in a React application. Of course, there are many more features and options available in RTK Query, depending on your needs.
Top comments (0)