How to Fetch Data in React Using Redux Toolkit Query

Install the Required Dependencies

Once you have your React project up and running, go ahead and install the following packages.

 npm install @reduxjs/toolkit react-redux 

Define an API Slice

An API slice is a component that includes the necessary Redux logic for integrating with and interacting with specified API endpoints. It provides a standardized way to define both query endpoints for fetching data and mutation endpoints for modifying the data.

Essentially, an API slice allows you to define the endpoints for requesting and making changes to the data from a particular source, providing a streamlined approach to integrating with APIs.

In the src directory, create a new folder and name it, features. Inside this folder, create a new file: apiSlice.js, and add the code below:

 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const productsApi = createApi({
  reducerPath: "productsAp",
  baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/" }),
  endpoints: (builder) => ({
    getAllProducts: builder.query({
      query: () => "products",
    }),
    getProduct: builder.query({
      query: (product) => `products/search?q=${product}`, 
    }),
  }),
});
export const { useGetAllProductsQuery , useGetProductQuery } = productsApi; 

This code defines an API slice called productsApi using Redux Toolkit’s createApi function. The API slice takes in the following properties:

• A reducerPath property – sets the name of the reducer in the Redux store.
• The baseQuery property – specifies the base URL for all API requests using the fetchBaseQuery function provided by Redux Toolkit.
• API endpoints – specify the available endpoints for this API slice using the builder object. In this case, the code defines two endpoints.

Finally, two hooks are generated from the productsAPI object which identifies the two endpoints. You can use these hooks in various React components to make API requests, retrieve data, and change the state in response to the user’s interaction.

This approach streamlines the state management and data fetching in the React application.

Configure the Redux Store

After fetching the data from the API, RTK Query caches the data in the Redux store. The store, in this case, serves as a central hub for managing the state of API requests made from the React application, including the data retrieved from those API requests ensuring components access and update this data as needed.

In the src directory, create a store.js file and add the following lines of code:

 import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "./features/apiSlice";
export const store = configureStore({
  reducer: {
   [productsApi.reducerPath]: productsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
   getDefaultMiddleware().concat(productsApi.middleware),
}); 

This code creates a new Redux store, with two main pieces of configuration:

1. Reducer: This defines how the store should handle updates to the state. In this case, the productsApi.reducer is passed in as the reducer function and is given a unique reducerPath key to identify it within the store’s overall state.
2. Middleware: This defines any additional middleware that should apply to the store.

The resulting store object is a fully-configured Redux store, which can be used to manage the state of the application.

By configuring the store in this way, the application can easily manage the state of API requests, and process their results in a standardized way using the Redux Toolkit.

Create a Component to Implement the RTK Functionality

In the src directory, create a new components folder with a new file inside: Data.js.

Add this code to the Data.js file:

 import { useGetAllProductsQuery } from "../features/apiSlice";
import React, { useState } from "react";
import "./product.component.css";
export const Data = () => {
  const { data, error, isLoading, refetch } = useGetAllProductsQuery();
  const [productsData, setProductsData] = useState([]);
  const handleDisplayData = () => {
    refetch();
    setProductsData(data?.products);
  };
  return (
    
"product-container">
      "product-button" onClick={handleDisplayData}>
        Display Data
      </button>
      {isLoading && <div>Loading...div>}
      {error && <div>Error: {error.message}div>}
      "product-label">Products:</label>
      {productsData && productsData.length > 0 && (
        

          {productsData.slice(0, 4).map((product) => (
            
"product-details" key={product.id}>
              
Name: {product.title}</p>
              
Description: {product.description}</p>
              
Price: {product.price}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};
 

This code demonstrates a React component that uses the useGetAllProductsQuery hook provided by the API slice to retrieve data from the specified API endpoint.

When the user clicks the Display Data button, the handleDisplayData function executes, sending an HTTP request to the API to retrieve product data. Once the response is received, the products’ data variable is updated with the response data. Finally, the component renders a list of product details.

Update the App Component

Make the following changes to the code in the App.js file:

 import "./App.css";
import { Data } from "./components/Data";
import { store } from "./store";
import { Provider } from "react-redux";
import { ApiProvider } from "@reduxjs/toolkit/query/react";
import { productsApi } from "./features/apiSlice";
function App() {
  return (
    
      
        
"App">
          
        </div>
      </ApiProvider>
    </Provider>
  );
}
export default App;
 

This code wraps the Data component with two providers. These two providers grant the component access to the Redux store and RTK Query features allowing it to fetch and display data from the API.

It’s easy to configure Redux Toolkit Query to efficiently retrieve data from a specified source with minimal code. Moreover, you can also incorporate functions to modify stored data by defining mutation endpoints in the API slice component.

By combining the features of Redux with RTK’s data-fetching abilities, you can obtain a comprehensive state management solution for your React web applications.