Truong Phung

Posted on Nov 13 • Edited on Nov 18

⚡🚀 ReactJS, TypeScript, Vite with Redux and TanStack (React Query) In Practice ⚛️

#webdev #javascript #react #tutorial

1. Redux vs React Query (TanStack)

Using Redux with Thunk and React Query (TanStack) together might seem redundant at first glance, but each tool has distinct strengths:

Redux with Thunk:
- State Management: Redux provides a centralized state container for your app, allowing you to manage and share state across components.
- Custom Logic and Control: With Thunk, you can add custom logic to handle side effects (like asynchronous API calls) within your Redux actions, giving you control over when and how state updates.
- Ideal for Complex UI States: Redux is well-suited for managing complex UI states that aren’t solely based on remote data—like UI toggles, forms, and authentication states.
React Query (TanStack):
- Optimized Data Fetching: React Query is purpose-built for server state management (data that comes from a server and can be out of sync with the UI state). It automates fetching, caching, synchronizing, and updating data from APIs, saving a lot of boilerplate code.
- Caching and Background Refetching: React Query automatically caches data and can refetch it in the background to keep it fresh, minimizing the need for manual updates.
- Automatic Retrying and Stale Management: React Query includes features like automatic retries, error handling, and marking data as "stale" or "fresh" based on customizable policies.

When to Use Each:

Redux is excellent for managing client-side state and states tied to the UI itself.
React Query is best for server-side state (API data), as it simplifies the lifecycle management of asynchronous data.

In essence, Redux and React Query complement each other: Redux is ideal for UI-centric state management, while React Query is specialized for data fetching and synchronization with remote APIs, reducing boilerplate and enhancing data freshness. Quickly boost your React projects development productivity with Github Copilot

2. Project Introduction

To create a fully comprehensive ReactJS + TypeScript + Vite example with Redux (using Thunk) and React Query (TanStack) for CRUD operations, we’ll set up a Node.js Express server with a JSON file as the data source. This server will provide API endpoints to simulate a real-world backend. Quickly have a look on TypeScript features

Here's an overview:

Frontend: React + Vite + TypeScript, using Redux and React Query to handle CRUD operations.
Backend: Node.js + Express to create endpoints for data retrieval, addition, update, and deletion from a .json file.

3. Setups

1. Set Up Backend with `Express`

Create a new directory for the backend, server, and add a db.json file for simulating data storage.
```
server/
├── db.json
└── server.js
```

Initialize a Node.js Project in server/:

cd server
npm init -y
npm install express body-parser fs cors

Create db.json – a simple JSON file to store items (server/db.json):

{
  "items": [
    { "id": 1, "title": "Sample Item 1" },
    { "id": 2, "title": "Sample Item 2" }
  ]
}

Create server.js – set up an Express server with endpoints for CRUD operations (server/server.js):

const express = require('express');
const fs = require('fs');
const path = require('path');
const cors = require('cors'); // Import the cors package

const app = express();
const PORT = process.env.PORT || 3001;

app.use(cors()); // Enable CORS for all routes
app.use(express.json());

const dbFilePath = path.join(__dirname, 'db.json');

// Helper function to read and write to the db.json file
const readData = () => {
  if (!fs.existsSync(dbFilePath)) {
    return { items: [] };
  }
  const data = fs.readFileSync(dbFilePath, 'utf-8');
  return JSON.parse(data);
};

const writeData = (data) => fs.writeFileSync(dbFilePath, JSON.stringify(data, null, 2));

// Get all items
app.get('/items', (req, res) => {
  const data = readData();
  res.json(data.items);
});

// Add a new item
app.post('/items', (req, res) => {
  const data = readData();
  const newItem = { id: Date.now(), title: req.body.title };
  data.items.push(newItem);
  writeData(data);
  res.status(201).json(newItem);
});

// Update an item
app.put('/items/:id', (req, res) => {
  const data = readData();
  const itemIndex = data.items.findIndex((item) => item.id === parseInt(req.params.id));
  if (itemIndex > -1) {
    data.items[itemIndex] = { ...data.items[itemIndex], title: req.body.title };
    writeData(data);
    res.json(data.items[itemIndex]);
  } else {
    res.status(404).json({ message: 'Item not found' });
  }
});

// Delete an item
app.delete('/items/:id', (req, res) => {
  const data = readData();
  data.items = data.items.filter((item) => item.id !== parseInt(req.params.id));
  writeData(data);
  res.status(204).end();
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Run the Backend Server:
```
node server.js
```

2. Set Up Frontend with `Vite`, `TypeScript`, `Redux`, and `React Query`

Initialize Vite Project:

npm create vite@latest react-redux-query-example --template react-ts
cd react-redux-query-example

Install Dependencies:

npm install @reduxjs/toolkit react-redux redux-thunk axios @tanstack/react-query

Project Structure:

src/
├── api/
│   └── apiClient.ts
├── features/
│   ├── items/
│   │   ├── itemsSlice.ts
│   │   └── itemsApi.ts
├── hooks/
│   └── useItems.ts
├── App.tsx
├── App.module.css
├── store.ts
└── main.tsx

4. Frontend Implementation

api/apiClient.ts - Axios Instance

    import axios from 'axios';

    const apiClient = axios.create({
      baseURL: 'http://localhost:3001',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    export default apiClient;

features/items/itemsSlice.ts - Redux Slice with Thunks
Define a Redux slice to handle CRUD operations with Redux Thunk.

    import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
    import apiClient from '../../api/apiClient';

    export interface Item {
      id: number;
      title: string;
    }

    interface ItemsState {
      items: Item[];
      loading: boolean;
      error: string | null;
    }

    const initialState: ItemsState = {
      items: [],
      loading: false,
      error: null,
    };

    // Thunks
    export const fetchItems = createAsyncThunk('items/fetchItems', async () => {
      const response = await apiClient.get('/items');
      return response.data;
    });

    const itemsSlice = createSlice({
      name: 'items',
      initialState,
      reducers: {
        addItem: (state, action: PayloadAction<Item>) => {
          state.items.push(action.payload);
        },
        updateItem: (state, action: PayloadAction<Item>) => {
          const index = state.items.findIndex((item) => item.id === action.payload.id);
          if (index !== -1) state.items[index] = action.payload;
        },
        deleteItem: (state, action: PayloadAction<number>) => {
          state.items = state.items.filter((item) => item.id !== action.payload);
        },
      },
      extraReducers: (builder) => {
        builder
          .addCase(fetchItems.pending, (state) => {
            state.loading = true;
          })
          .addCase(fetchItems.fulfilled, (state, action: PayloadAction<Item[]>) => {
            state.items = action.payload;
            state.loading = false;
          })
          .addCase(fetchItems.rejected, (state, action) => {
            state.error = action.error.message || 'Failed to fetch items';
            state.loading = false;
          });
      },
    });

    export const { addItem, updateItem, deleteItem } = itemsSlice.actions;
    export default itemsSlice.reducer;

features/items/itemsApi.ts - React Query Hooks

Define CRUD operations using React Query.

    import { useQuery, useMutation, useQueryClient, UseQueryResult, UseMutationResult } from '@tanstack/react-query';
    import { useDispatch } from 'react-redux';
    import apiClient from '../../api/apiClient';
    import { Item, addItem as addItemAction, updateItem as updateItemAction, deleteItem as deleteItemAction } from './itemsSlice';

    export const useFetchItems = (): UseQueryResult<Item[], Error> => useQuery({
      queryKey: ['items'],
      // The queryFn in React Query is called under several conditions:
      //  1. Initial Load: When the component that uses the useQuery hook mounts for the first time.
      //  2. Stale Data: When the data in the cache is considered stale. This is determined by the staleTime configuration.
      //  3. Window Focus: When the window regains focus, if refetchOnWindowFocus is set to true.
      //  4. Interval Refetching: At regular intervals, if refetchInterval is set.
      //  5. Manual Refetch: When you manually refetch the query using methods like queryClient.invalidateQueries or queryClient.refetchQueries.
      //  6. Network Reconnect: When the network reconnects, if refetchOnReconnect is set to true.
      queryFn: async (): Promise<Item[]> => {
        const response = await apiClient.get('/items');
        return response.data;
      }
      // The time that cache stays valid
      // If staleTime has not been reached, React Query will not trigger a new request when useFetchItems is called again. 
      // Instead, it will serve the data from its cache since the data is still considered "fresh."
      // If the server data changes during the staleTime, React Query won't automatically know about it 
      // since it doesn't check the server until the cache is marked as "stale" or a manual refresh is triggered (e.g., queryClient.invalidateQueries or refetch). or refetchInterval is used
      staleTime: 5 * 60 * 1000, // Cache for 5 minutes (default: 0)
      // Scenarios When refetchOnWindowFocus is Triggered
      //  1. Switching Tabs: When the user switches from another browser tab back to the tab where your application is running.
      //  2. Switching Windows: When the user switches from another application window (e.g., a different browser window or a different application) back to the browser window where your application is running.
      //  3. Minimize/Restore: When the user minimizes the browser window and then restores it.
      //  4. Lock/Unlock Screen: When the user locks their computer screen and then unlocks it, bringing the browser window back into focus.
      refetchOnWindowFocus: true, // Refetch on focus (default: true)
      // Use refetchInterval: Automatically poll the server at regular intervals.
      refetchInterval: 10000, // Polling every 10 seconds (default: false)
      // If the data in the cache is still valid (not stale), React Query will return it directly without making a new API request. 
      // In this case, onSuccess won’t be triggered since the queryFn isn’t executed.
      // If the data returned by queryFn matches the existing cached data, React Query optimizes performance by not marking the query as "updated." Since there’s no perceived data change, the onSuccess callback is not called.
      onSuccess: (data) => {
        console.log("call onSuccess")
        const dispatch = useDispatch();
        //dispatch(setItems(data));
      },
    });

    export const useAddItem = (): UseMutationResult<Item, Error, { title: string }> => {
      const queryClient = useQueryClient();
      const dispatch = useDispatch();
      return useMutation({
        mutationFn: async (newItem: { title: string }): Promise<Item> => {
          const response = await apiClient.post('/items', newItem);
          return response.data;
        },
        // This will only be called if the mutation is successful, 
        // different with onSettled with will be called regardless of whether the mutation was successful or not
        onSuccess: (data) => {
          // Invalidate cache, refresh items after creating
          queryClient.invalidateQueries({ queryKey: ['items'] });
          dispatch(addItemAction(data));
        }
      });
    };

    export const useUpdateItem = (): UseMutationResult<Item, Error, { id: number; title: string }> => {
      const queryClient = useQueryClient();
      const dispatch = useDispatch();
      return useMutation({
        mutationFn: async (updatedItem: { id: number; title: string }): Promise<Item> => {
          const response = await apiClient.put(`/items/${updatedItem.id}`, updatedItem);
          return response.data;
        },
        onSuccess: (data) => {
          queryClient.invalidateQueries({ queryKey: ['items'] });
          dispatch(updateItemAction(data));
        }
      });
    };

    export const useDeleteItem = (): UseMutationResult<void, Error, number> => {
      const queryClient = useQueryClient();
      const dispatch = useDispatch();
      return useMutation({
        mutationFn: async (id: number): Promise<void> => {
          await apiClient.delete(`/items/${id}`);
        },
        onSuccess: (_, id) => {
          queryClient.invalidateQueries({ queryKey: ['items'] });
          dispatch(deleteItemAction(id));
        }
      });
    };

store.ts - Redux Store

    import { configureStore } from '@reduxjs/toolkit';
    import itemsReducer from './features/items/itemsSlice';

    const store = configureStore({
      reducer: {
        items: itemsReducer,
      },
    });

    export type RootState = ReturnType<typeof store.getState>;
    export type AppDispatch = typeof store.dispatch;
    export default store;

App.tsx - Main Component with CRUD Operations

     import React, { useEffect, useState } from 'react';
     import { useDispatch, useSelector } from 'react-redux';
     import { fetchItems, deleteItem as deleteItemAction } from './features/items/itemsSlice';
     import { RootState, AppDispatch } from './store';
     import { useFetchItems, useAddItem, useUpdateItem, useDeleteItem } from from './features/items/itemsApi';
     import styles from './App.module.css';

     const App: React.FC = () => {
     const dispatch = useDispatch<AppDispatch>();
     const { items, loading, error } = useSelector((state: RootState) => state.items);

     const { data: queryItems } = useFetchItems();
     const addItemMutation = useAddItem();
     const updateItemMutation = useUpdateItem();
     const deleteItemMutation = useDeleteItem();

     const [editingItem, setEditingItem] = useState<{ id: number; title: string } | null>(null);
     const [isLoading, setIsLoading] = useState(false);
     const [loadingButton, setLoadingButton] = useState<string | null>(null);

      useEffect(() => {
        dispatch(fetchItems());
      }, [dispatch]);

      const handleAddItem = () => {
        setIsLoading(true);
        setLoadingButton('add');
        const newItem = { title: 'New Item' };
        addItemMutation.mutate(newItem, {
          // onSettled is called regardless of whether the query or mutation was successful or resulted in an error. 
          // It is always called after the request has completed.
          onSettled: () => {
            setIsLoading(false);
            setLoadingButton(null);
          },
        });
      };

      const handleUpdateItem = (id: number, title: string) => {
        setIsLoading(true);
        setLoadingButton(`update-${id}`);
        updateItemMutation.mutate({ id, title }, {
          onSettled: () => {
            setIsLoading(false);
            setLoadingButton(null);
            setEditingItem(null);
          },
        });
      };

      const handleDeleteItem = (id: number) => {
        setIsLoading(true);
        setLoadingButton(`delete-${id}`);

        // Optimistically update the UI
        const previousItems = items;
        dispatch(deleteItemAction(id));

        deleteItemMutation.mutate(id, {
          onSettled: () => {
            setIsLoading(false);
            setLoadingButton(null);
          },
          onError: () => {
            // Revert the change if the mutation fails
            dispatch(fetchItems());
          },
        });
      };

      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error: {error}</p>;

      return (
        <div className={styles.container}>
          <h1 className={styles.title}>Items</h1>
          <button onClick={handleAddItem} className={styles.button} disabled={isLoading}>
            Add Item
            {loadingButton === 'add' && <div className={styles.spinner}></div>}
          </button>
          <ul className={styles.list}>
            {(items).map((item) => (
              <li key={item.id} className={styles.listItem}>
                {editingItem && editingItem.id === item.id ? (
                  <>
                    <input
                      type="text"
                      value={editingItem.title}
                      onChange={(e) => setEditingItem({ ...editingItem, title: e.target.value })}
                      className={styles.input}
                    />
                    <div className={styles.buttonGroup}>
                      <button onClick={() => handleUpdateItem(item.id, editingItem.title)} className={styles.saveButton} disabled={isLoading}>
                        Save
                        {loadingButton === `update-${item.id}` && <div className={styles.spinner}></div>}
                      </button>
                      <button onClick={() => setEditingItem(null)} className={styles.cancelButton} disabled={isLoading}>
                        Cancel
                      </button>
                    </div>
                  </>
                ) : (
                  <>
                    {item.title}
                    <div className={styles.buttonGroup}>
                      <button onClick={() => setEditingItem(item)} className={styles.editButton} disabled={isLoading}>
                        Edit
                      </button>
                      <button onClick={() => handleDeleteItem(item.id)} className={styles.deleteButton} disabled={isLoading}>
                        Delete
                        {loadingButton === `delete-${item.id}` && <div className={styles.spinner}></div>}
                      </button>
                    </div>
                  </>
                )}
              </li>
            ))}
          </ul>
        </div>
      );
    };

    export default App;

Styling (App.module.css)

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
    }

    .title {
      color: #2c3e50;
      font-size: 2rem;
      margin-bottom: 20px;
      text-align: center;
    }

    .button {
      background-color: #3498db;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      max-width: 130px;
    }

    .button:hover {
      background-color: #2980b9;
    }

    .list {
      list-style-type: none;
      padding: 0;
    }

    .listItem {
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #bdc3c7;
      border-radius: 8px;
      background-color: #ecf0f1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .input {
      padding: 5px;
      border: 1px solid #bdc3c7;
      border-radius: 4px;
      flex-grow: 1;
      margin-right: 10px;
    }

    .buttonGroup {
      display: flex;
      gap: 10px;
    }

    .editButton {
      background-color: #f39c12;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      max-width: 100px;
    }

    .editButton:hover {
      background-color: #e67e22;
    }

    .deleteButton {
      background-color: #e74c3c;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      max-width: 100px;
    }

    .deleteButton:hover {
      background-color: #c0392b;
    }

    .saveButton {
      background-color: #2ecc71;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      max-width: 100px;
    }

    .saveButton:hover {
      background-color: #27ae60;
    }

    .cancelButton {
      background-color: #95a5a6;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      max-width: 100px;
    }

    .cancelButton:hover {
      background-color: #7f8c8d;
    }

    .spinner {
      border: 4px solid rgba(0, 0, 0, 0.1);
      border-left-color: #3498db;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

main.tsx - Set Up Providers for Redux and React Query

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import { Provider } from 'react-redux';
    import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
    import store from './store';
    import App from './App';

    const queryClient = new QueryClient();

    ReactDOM.createRoot(document.getElementById('root')!).render(
      <React.StrictMode>
        <Provider store={store}>
          <QueryClientProvider client={queryClient}>
            <App />
          </QueryClientProvider>
        </Provider>
      </React.StrictMode>
    );

5. Explanation and Summary

Redux with Thunks: Manages local and optimistic state updates for items.
React Query: Efficiently handles server data fetching and synchronization.
Combined Usage: Both tools work together seamlessly. Redux manages local state, while React Query specializes in fetching and caching server state, allowing the frontend to stay in sync with the backend.

This setup provides a fully functioning app where Redux and React Query complement each other by managing client and server states effectively.

If you found this helpful, let me know by leaving a 👍 or a comment!, or if you think this post could help someone, feel free to share it! Thank you very much! 😃

Top comments (7)

Philip • Nov 13

Integrating EchoAPI into my Redux workflow has greatly boosted both my development speed and the accuracy of API handling.

Truong Phung • Nov 14 • Edited

hello @philip_zhang_854092d88473 , thank you for your sharing, could you share me the link to EchoAPI that you mentioned, I'll come and have a look, thank you 😃

Philip • Nov 18

Hello! 😊 Thanks for your interest! You can check out EchoAPI through this link echoapi.com/. I hope you find it as useful as I have! If you have any questions about it, feel free to ask.