Best way to handle CRUD in large-scale Next.js Projects With Redux Toolkit & RTK Query

Handling CRUD operations in large-scale Next.js projects with Redux Toolkit for state management and Redux Toolkit Query for API fetching is a powerful combination. Below is a comprehensive guide on how to structure your project to efficiently manage state and API interactions:

Step 1: Project Structure

Organize your project for scalability. Consider a structure like the following:

- components/
- features/
  - todos/
    - todosSlice.js
- pages/
  - api/
    - todos.js
- queries/
  - todos.js
- _app.js
- store.js

Step 2: Install Dependencies

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

Step 3: Configure Redux Toolkit and RTK Query

`store.js`

// store.js

import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query/react';
import { useDispatch } from 'react-redux';
import { createApi } from '@reduxjs/toolkit/query/react';
import { todosApi } from './queries/todos';

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

setupListeners(store.dispatch);

export const useAppDispatch = () => useDispatch();

export default store;

`queries/todos.js`

// queries/todos.js

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

const API_URL = 'your_backend_api_url'; // Replace with your actual backend API URL

export const todosApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: API_URL }),
  endpoints: (builder) => ({
    getTodos: builder.query({
      query: () => 'todos',
    }),
    addTodo: builder.mutation({
      query: (newTodo) => ({
        url: 'todos',
        method: 'POST',
        body: newTodo,
      }),
    }),
    updateTodo: builder.mutation({
      query: ({ id, text }) => ({
        url: `todos/${id}`,
        method: 'PUT',
        body: { text },
      }),
    }),
    deleteTodo: builder.mutation({
      query: (id) => ({
        url: `todos/${id}`,
        method: 'DELETE',
      }),
    }),
  }),
});

export const { useGetTodosQuery, useAddTodoMutation, useUpdateTodoMutation, useDeleteTodoMutation } = todosApi;

Step 4: Redux Toolkit Slice

`features/todosSlice.js`

// features/todosSlice.js

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

export const todosSlice = createSlice({
  name: 'todos',
  initialState: {
    data: [],
  },
  reducers: {
    setTodos: (state, action) => {
      state.data = action.payload;
    },
    addTodo: (state, action) => {
      state.data.push(action.payload);
    },
    updateTodo: (state, action) => {
      const { id, text } = action.payload;
      const index = state.data.findIndex((todo) => todo.id === id);
      if (index !== -1) {
        state.data[index].text = text;
      }
    },
    deleteTodo: (state, action) => {
      const id = action.payload;
      state.data = state.data.filter((todo) => todo.id !== id);
    },
  },
});

export const { setTodos, addTodo, updateTodo, deleteTodo } = todosSlice.actions;

export default todosSlice.reducer;

Step 5: Components

`components/TodoList.js`

// components/TodoList.js

import React from 'react';
import { useGetTodosQuery, useAddTodoMutation, useUpdateTodoMutation, useDeleteTodoMutation } from '../queries/todos';
import { useDispatch } from 'react-redux';
import { setTodos, addTodo, updateTodo, deleteTodo } from '../features/todosSlice';

const TodoList = () => {
  const dispatch = useDispatch();

  const { data: todos, isLoading } = useGetTodosQuery();
  const addTodoMutation = useAddTodoMutation();
  const updateTodoMutation = useUpdateTodoMutation();
  const deleteTodoMutation = useDeleteTodoMutation();

  const handleAddTodo = async () => {
    const newTodo = { text: 'New Todo' };
    const response = await addTodoMutation.mutateAsync(newTodo);
    dispatch(addTodo(response));
  };

  const handleUpdateTodo = async (id, newText) => {
    const response = await updateTodoMutation.mutateAsync({ id, text: newText });
    dispatch(updateTodo(response));
  };

  const handleDeleteTodo = async (id) => {
    await deleteTodoMutation.mutateAsync(id);
    dispatch(deleteTodo(id));
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Todo App</h1>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}{' '}
            <button onClick={() => handleUpdateTodo(todo.id, 'Updated Todo')}>Update</button>
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
      <button onClick={handleAddTodo}>Add Todo</button>
    </div>
  );
};

export default TodoList;

Conclusion:

This structure separates concerns, making it easier to manage and scale your application. Redux Toolkit Query handles data fetching and caching, while Redux Toolkit handles state management. This setup allows for better maintainability and scalability in large-scale Next.js projects. Adjust the code based on your specific requirements and backend API structure.

Support My Work ❤️

If you enjoy my content and find it valuable, consider supporting me by buying me a coffee. Your support helps me continue creating and sharing useful resources. Thank you!

Connect with Me 🌍

Let’s stay connected! You can follow me or reach out on these platforms:

🔹 YouTube – Tutorials, insights & tech content

🔹 LinkedIn – Professional updates & networking

🔹 GitHub – My open-source projects & contributions

🔹 Instagram – Behind-the-scenes & personal updates

🔹 X (formerly Twitter) – Quick thoughts & tech discussions

I’d love to hear from you—whether it’s feedback, collaboration ideas, or just a friendly hello!