The best way to do CRUD in large-scale Next.js Projects with Redux Toolkit & Axios

When dealing with large-scale Next.js projects, using Redux Toolkit for state management and Axios for handling API requests is a common and effective combination. Below is a guide on how to implement CRUD operations in a large-scale Next.js project using Redux Toolkit and Axios.

Step 1: Set Up Your Project

Install the required packages:

npm install react-redux @reduxjs/toolkit axios

Step 2: Configure Redux Toolkit

Create your Redux slices for managing state:

redux/slices/entitiesSlice.js

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

const entitiesSlice = createSlice({
  name: 'entities',
  initialState: [],
  reducers: {
    setEntities: (state, action) => {
      return action.payload;
    },
    addEntity: (state, action) => {
      state.push(action.payload);
    },
    updateEntity: (state, action) => {
      const { id, updatedEntity } = action.payload;
      const index = state.findIndex((entity) => entity.id === id);
      if (index !== -1) {
        state[index] = updatedEntity;
      }
    },
    removeEntity: (state, action) => {
      const idToRemove = action.payload;
      return state.filter((entity) => entity.id !== idToRemove);
    },
  },
});

export const { setEntities, addEntity, updateEntity, removeEntity } = entitiesSlice.actions;
export default entitiesSlice.reducer;

redux/store.js

import { configureStore } from '@reduxjs/toolkit';
import entitiesReducer from './slices/entitiesSlice';

const store = configureStore({
  reducer: {
    entities: entitiesReducer,
    // Add other reducers as needed
  },
});

export default store;

Step 3: Set Up Axios for API Requests

api.js

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://your-api-base-url.com/api', // Adjust the base URL as needed
});

export const getEntities = async () => {
  const response = await instance.get('/entities');
  return response.data;
};

export const createEntity = async (newEntity) => {
  const response = await instance.post('/entities', newEntity);
  return response.data;
};

export const updateEntityById = async (id, updatedEntity) => {
  const response = await instance.put(`/entities/${id}`, updatedEntity);
  return response.data;
};

export const deleteEntityById = async (id) => {
  const response = await instance.delete(`/entities/${id}`);
  return response.data;
};

Step 4: Integrate with Next.js

pages/index.js

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setEntities, addEntity, updateEntity, removeEntity } from '../redux/slices/entitiesSlice';
import { getEntities, createEntity, updateEntityById, deleteEntityById } from '../api';

const Home = () => {
  const dispatch = useDispatch();
  const entities = useSelector((state) => state.entities);

  useEffect(() => {
    // Fetch entities on component mount
    getEntities().then((data) => dispatch(setEntities(data)));
  }, [dispatch]);

  const handleCreateEntity = async () => {
    const newEntity = { name: 'New Entity' };
    const createdEntity = await createEntity(newEntity);
    dispatch(addEntity(createdEntity));
  };

  const handleUpdateEntity = async (id, updatedName) => {
    const updatedEntity = { name: updatedName };
    const updatedData = await updateEntityById(id, updatedEntity);
    dispatch(updateEntity({ id, updatedEntity: updatedData }));
  };

  const handleDeleteEntity = async (id) => {
    await deleteEntityById(id);
    dispatch(removeEntity(id));
  };

  return (
    <div>
      <h1>Entity List</h1>
      {entities.map((entity) => (
        <div key={entity.id}>
          <span>{entity.name}</span>
          <button onClick={() => handleUpdateEntity(entity.id, prompt('Enter new name:', entity.name))}>Update</button>
          <button onClick={() => handleDeleteEntity(entity.id)}>Delete</button>
        </div>
      ))}
      <button onClick={handleCreateEntity}>Create Entity</button>
    </div>
  );
};

export default Home;

Step 5: Run Your Next.js App

Ensure your development server is running:

npm run dev

Visit http://localhost:3000 in your browser to see the CRUD functionality in action.

Conclusion

This example illustrates a basic implementation of CRUD operations in a large-scale Next.js project using Redux Toolkit for state management and Axios for API requests. Adapt the code to meet your specific project requirements, such as adding error handling, authentication, or pagination, based on your application needs.

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!

Disclaimer

This content has been generated with the assistance of AI. While I strive for accuracy and quality, please verify critical information independently.