RTK Query: Simplifying Data Fetching in Redux Applications

// store/traditional/posts.ts

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

import axios from 'axios';

export const fetchPosts = createAsyncThunk('posts/fetch', async () => {

  const { data } = await axios.get('https://api.example.com/posts');

  return data;

});

export const addPost = createAsyncThunk('posts/add', async (body) => {

  const { data } = await axios.post('https://api.example.com/posts', body);

  return data;

});




const postsSlice = createSlice({

  name: 'posts',

  initialState: { 

    items: [], 

    loading: false, 

    error: null 

  },

  reducers: {},

  extraReducers: (builder) => {

    builder

      .addCase(fetchPosts.pending, (state) => {

        state.loading = true;

        state.error = null;

      })

      .addCase(fetchPosts.fulfilled, (state, action) => {

        state.loading = false;

        state.items = action.payload;

      })

      .addCase(fetchPosts.rejected, (state, action) => {

        state.loading = false;

        state.error = action.error.message ?? 'Error';

      })

      .addCase(addPost.fulfilled, (state, action) => {

        state.items.unshift(action.payload);

      });

  },

});

export default postsSlice.reducer;

// components/PostsTraditional.tsx

import React, { useEffect, useState } from 'react';

import { useDispatch, useSelector } from 'react-redux';

import { addPost, fetchPosts } from '../store/traditional/posts';

export default function PostsTraditional() {

  const dispatch = useDispatch();

  const { items, loading, error } = useSelector((s) => s.posts);

  const [title, setTitle] = useState('');

  useEffect(() => {

    dispatch(fetchPosts());

  }, [dispatch]);

  const handleAdd = () => dispatch(addPost({ title, body: 'demo', userId: 1 }));

  if (loading) return <p>Loading…</p>;

  if (error) return <p>{error}</p>;

  return (

    <div>

      <button onClick={handleAdd}>Add Post</button>

      {items.map((post) => (

        <div key={post.id}>{post.title}</div>

      ))}

    </div>

  );

}

// services/api.ts

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({

  reducerPath: 'api',

  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }),

  tagTypes: ['Posts'],

  endpoints: (builder) => ({

    getPosts: builder.query({

      query: () => '/posts',

      providesTags: ['Posts'],

    }),

    addPost: builder.mutation({

      query: (body) => ({

        url: '/posts',

        method: 'POST',

        body,

      }),

      invalidatesTags: ['Posts'], // Automatic refetch!

    }),

  }),

});

export const { useGetPostsQuery, useAddPostMutation } = api;

// components/PostsRTKQuery.tsx

import React, { useState } from 'react';

import { useGetPostsQuery, useAddPostMutation } from '../services/api';

export default function PostsRTKQuery() {

  const { data: posts, isLoading, isError, refetch } = useGetPostsQuery();

  const [addPost, { isLoading: isAdding }] = useAddPostMutation();

  const [title, setTitle] = useState('');

  const handleAdd = async () => {

    await addPost({ title, body: 'demo', userId: 1 });

    // List automatically refreshes due to invalidatesTags!

  };

  if (isLoading) return <p>Loading…</p>;

  if (isError) return <p>Error loading posts</p>;

  return (

    <div>

      <button onClick={handleAdd} disabled={isAdding}>

        {isAdding ? 'Adding…' : 'Add Post'}

      </button>

      <button onClick={refetch}>Refresh</button>

      {posts?.map((post) => (

        <div key={post.id}>{post.title}</div>

      ))}

    </div>

  );

}