How to Create React Apps With Redux Toolkit and RTK Query?

Introduction

If you’re a React developer seeking to streamline state management and API interactions, you’ve found the ideal destination.

Redux Toolkit is a substantial library that simplifies things more than the often lengthy and boilerplate-heavy Redux setup. It offers a selection of tools that simplify writing efficient and maintainable Redux code. No more drowning in action creators, reducers, and store configuration – Redux Toolkit has your back.

But we don’t stop there. Enter RTK Query, another fantastic tool that works seamlessly with the Redux Toolkit. RTK Query makes data retrieval easier from your API endpoints. No more writing tons of request-handling code; RTK Query handles that for you. It helps you keep your data in sync with the server easily.

So, read more and provide your clients with the Expert React.js Services.

Also, check these Top 13 React Tools.

Overview To RTK Query

Understand what Redux is:

• It is a powerful server data fetching and caching tool. It’s designed to simplify the overall conditions for uploading data to a web application, eliminating the requirement for handwriting downloading data & the cache concept yourself.
• The Redux Toolkit core itself creates a Query on top of it.
• It is included within the @reduxjs/toolkit package as an extra add-on.
• That provides advanced setup options to handle your fetching and caching needs most flexibly and efficiently as possible.

Why RTK Query

• As mentioned above, the main reason behind the RTK Query was to simplify the data fetching and caching process in React applications.
• It allows you to trace the history of state changes over time.
• Built with TypeScript, it’s first-class types support.
• Support OpenAPI and GraphQL.
• Support React Hooks.
• Adding it as middleware empowers React Hooks to assist in fetching your data.
• That is UI-agnostic. It will be integrated with any framework capable of using Redux (Vue.js, Svelte, Angular, Etc.)

Fetching and Caching data with RTK Query

Now you understand RTK Query and the reasons behind its intro. Now, we understand the fetch and cache data using RTK queries.

1. Data Fetching

RTK Query uses a method called fetchBaseQuery to fetch data from services. It is a lightweight fetch wrapper that handles request headers and responses rather than fetches and Axios.

service.js

import { createApi, fetchBaseQuery } from ‘@rtk-incubator/rtk-query’;

//Create your service using a base URL and expected endpoints
        export const demoApi = createApi({
          reducerPath: 'demoApi',
          baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_API }),
          endpoints: (builder) => ({
          getRecords: builder.query({
            query: {( entity )} => {
            return {
              url: `demo/${entity}`,
              method: "GET",
              headers: {
              "content-type": "application/json;odata=verbose",
              },
            };
            },
          }),
          }),
        });
    
        export const { useGetRecordsQuery } = demoApi;

The next step is to add this service to our store by adding our generated reducer and our API middleware. This can activate caching, prefetching, polling, and other features.

store.js

export const store = configureStore({
          reducer: { [demoApi.reducerPath]: demoApi.reducer },
          middleware: getDefaultMiddleware => 
            getDefaultMiddleware().concat(dndApi.middleware),
        });

Next, you would like to wrap the provider, as you’d do with a basic Redux store, then you’ll query in your components using your query hook.

index.js

import * as React from "react";
        import { useGetRecordsQuery } from "./services";
    
        export default function App(){
        //Using a query hook automatically fetches data and returns query values
        const { data: userRecoed, isError, isLoading } = useGetRecordsQuery("User");
        return (
          <div className="App">
            {isError ? (
              <>Oh no, there was an error</>
            ) : isLoading ? (
              <>isLoading...</>
        ) : userRecoed ? (
        <>
            <h3>{userRecoed.name}</h3>
            <h4>{userRecoed.email}</h4>
          </>
          ) : null}
        </div>
        );
        }

2. Data Caching

Caching is automatic in RTK Query. If your data ever changes, prefetching occurs automatically just for the elements that changed. This can be handled via RTK Query’s powerful queryCachedKey.

Conditional fetching

As You read above, useQuery automatically fetches your data and handles the caching. RTK Query introduces the ability to control whether a query runs automatically by adding a boolean skip parameter to the query hook, allowing for better management of this behavior. Setting skip to false significantly influences the fetching and caching of your data.

Mutation

Mutations are used to send data updates to the server and apply the changes to the local cache. Mutations can even invalidate cached data and force re-fetches.

addUserRecord: builder.mutation({
        query: params => ({
        url: `${params.entity}`,
        method: "POST",
        body: params.data,
        }),
        invalidatesTags: (result, error, arg) => (arg.tag ? [arg.tag] ? []),
        }),

Customizability

• The complete client API library must be fully customizable; an honest example is Axios. This allows developers to possess the power to manage automated behavior, connectors, and authentication without the necessity to duplicate code.
• Configuring the Query primarily occurs at the “create” stage. It exposes parameters such as:
  • baseQuery,which can be customized from interceptors or mold return formats
  • endpoints, which is the set of operations you perform against your servers
  • setup listeners, which may be a utility to assist manage refetching either in an exceedingly global or granular way
  • There is much more to handle your API calls, and the Redux store

Error handling

Errors are returned through the error property provided by the hook. A Query expects you to return payloads (errors or successes) during a particular format to help with type inference.

const { data: userRecoed, isError, isLoading } = useGetRecordsQuery("User");
          return (
            <div className="App">
              {isError ? (
                <>Oh no, there was an error</>
              ) : isLoading ? (
                <>isLoading...</>
              ) : userRecoed ? (
              <>
                <h3>{userRecoed.name}</h3>
                <h4>{userRecoed.email}</h4>
              </>
            ) : null}
            </div>
        );

Similarly Reference site: https://redux-toolkit.js.org