Redux Toolkit vs. TanStack Query: Which Should You Use?

After diving back into Redux after two years, I’ve compared it with TanStack Query, which I’ve been using exclusively. Here’s what you need to know:

Here’s a list of the differences between TanStack Query & RTK Query. As you can see the main differences are that TanStack Query supports is Infinite Queries, Bi-directional Infinite Queries, and Infinite Query Refetching.

https://tanstack.com/query/v4/docs/framework/react/comparison

Setting Up Redux Toolkit

Install Redux Toolkit:

bash

yarn add @reduxjs/toolkit

Creating API Endpoints with RTK-Query:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; 
 
export const api = createApi({ 
  reducerPath: 'api', 
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com' }), 
  refetchOnFocus: true, 
  refetchOnReconnect: true, 
  endpoints: (builder) => ({ 
    getUsers: builder.query({ 
      query: () => ({ 
        url: '/users/', 
        method: 'GET', 
      }), 
    }), 
    createUser: builder.mutation({ 
      query: (body) => ({ 
        url: '/users', 
        method: 'POST', 
        body, 
      }), 
    }), 
  }), 
}); 
export const { useGetUsersQuery, useCreateUserMutation } = api;

Integrating with React Native Expo:

import { ApiProvider } from '@reduxjs/toolkit/dist/query/react'; 
import { StatusBar } from 'expo-status-bar'; 
import { StyleSheet, Text, View } from 'react-native'; 
import { api } from './apiSlice'; 
import { UserList } from './GetUsers'; 
 
function AppWrapper() { 
  return ( 
    <View style={styles.container}> 
      <StatusBar style="auto" /> 
      <UserList /> 
    </View> 
  ); 
} 
export default function App() { 
  return ( 
    <ApiProvider api={api}> 
      <AppWrapper /> 
    </ApiProvider> 
  ); 
} 
const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
  }, 
});

Adding to Redux Store:

import { configureStore } from '@reduxjs/toolkit'; 
import { api } from './apiSlice'; 
import { setupListeners } from '@reduxjs/toolkit/query'; 
 
export const store = configureStore({ 
  reducer: { 
    api: api.reducer, 
    // Other reducers here 
  }, 
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware({ 
      serializableCheck: false, 
    }).concat(api.middleware), 
}); 
setupListeners(store.dispatch);

Fetching Data with RTK-Query:

import React from 'react'; 
import { Text, FlatList, ActivityIndicator, StyleSheet, View, SafeAreaView } from 'react-native'; 
import { useGetUsersQuery } from './apiSlice'; 
 
export const UserList = () => { 
  const { data, isLoading } = useGetUsersQuery(); 
  if (isLoading) return <ActivityIndicator />; 
  return ( 
    <SafeAreaView> 
      <FlatList 
        data={data} 
        keyExtractor={(item) => item.id.toString()} 
        renderItem={({ item }) => ( 
          <View style={styles.itemContainer}> 
            <Text>id: {item.id}</Text> 
            <Text>name: {item.name}</Text> 
            <Text>phone: {item.phone}</Text> 
            <Text>email: {item.email}</Text> 
          </View> 
        )} 
      /> 
    </SafeAreaView> 
  ); 
}; 
const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
  }, 
  itemContainer: { 
    backgroundColor: '#fff', 
    padding: 5, 
    paddingHorizontal: 18, 
    marginTop: 5, 
    borderWidth: 1, 
    borderRadius: 10, 
    alignItems: 'center', 
    gap: 2 
  }, 
});

Setting Up TanStack Query

Install TanStack Query:

yarn add @tanstack/react-query

Add QueryClientProvider:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; 
 
const queryClient = new QueryClient(); 
function App() { 
  return ( 
    <QueryClientProvider client={queryClient}> 
      <Routes /> 
    </QueryClientProvider> 
  ); 
}

Using UseQuery Hook:

import React from "react"; 
import { useQuery } from "@tanstack/react-query"; 
 
const Home = () => { 
  const { userId } = useAccount(); 
  const { data } = useQuery({ 
    queryKey: ["userDetails", userId], 
    queryFn: async () => { 
      // API call here 
    }, 
  }); 
  return ( 
    // Your UI components here 
  ); 
}; 
export default Home;

Conclusion

Redux Toolkit involves more setup complexity, which can lead to potential bugs or issues. TanStack Query, on the other hand, is straightforward to set up, has documentation that’s easier to navigate, and debugging is less cumbersome. Both libraries offer similar features, but TanStack Query wins for its simplicity and efficiency.

Feature Comparison:

My recommendation? Go with TanStack Query for most modern applications unless you have specific needs that only Redux can fulfill.

Try BanKan Board — The Project Management App Made for Developers, by Developers

If you’re tired of complicated project management tools with story points, sprints, and endless processes, BanKan Board is here to simplify your workflow. Built with developers in mind, BanKan Board lets you manage your projects without the clutter.

Key Features:

• No complicated processes: Focus on what matters without the overhead of traditional project management systems.
• Claude AI Assistant: Get smart assistance to streamline your tasks and improve productivity.
• Free to Use: Start using it without any upfront cost.
• Premium Features: Upgrade to unlock advanced functionality tailored to your team’s needs.

Whether you’re building a side project, managing a team, or collaborating on open-source software, BanKan Board is designed to make your life easier. Try it today!

Get Started with BanKan Board — It’s Free!