Lesson 28 — Redux Toolkit CRUD Example (Create, Read, Update, Delete)

by

🧭 Introduction

In the previous lesson, you learned what Redux Toolkit is and why it is used.
Now it’s time to apply that knowledge with a real, practical CRUD example.

CRUD stands for:

  • Create
  • Read
  • Update
  • Delete

In this lesson, you will learn:

  • How to set up Redux Toolkit in a React app
  • How to create a slice
  • How to perform CRUD operations using Redux Toolkit
  • How components interact with the Redux store

❓ What We Will Build (Example)

We will build a simple Todo Manager using Redux Toolkit where users can:

  • Add a todo
  • View all todos
  • Edit a todo
  • Delete a todo

This example focuses on state management, not UI design.

🏗 Project Structure (Recommended)

src/
 ├── redux/
 │    ├── store.js
 │    └── todoSlice.js
 ├── components/
 │    └── TodoApp.jsx
 └── App.jsx

📦 Step 1: Install Redux Toolkit

npm install @reduxjs/toolkit react-redux

🧠 Step 2: Create Redux Store

📄 redux/store.js

import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./todoSlice";

const store = configureStore({
  reducer: {
    todo: todoReducer,
  },
});

export default store;

✔ configureStore sets up Redux with best practices
✔ Automatically enables Redux DevTools

🧠 Step 3: Create Todo Slice

📄 redux/todoSlice.js

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

const initialState = {
  todos: [],
};

const todoSlice = createSlice({
  name: "todo",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.todos.push(action.payload);
    },
    deleteTodo: (state, action) => {
      state.todos = state.todos.filter(
        (todo) => todo.id !== action.payload
      );
    },
    updateTodo: (state, action) => {
      const { id, text } = action.payload;
      const todo = state.todos.find((t) => t.id === id);
      if (todo) {
        todo.text = text;
      }
    },
  },
});

export const { addTodo, deleteTodo, updateTodo } = todoSlice.actions;
export default todoSlice.reducer;

✔ State, reducers, and actions are in one file
✔ No switch cases
✔ No immutability issues (handled by Immer)

🔗 Step 4: Provide Store to App

📄 App.jsx

import { Provider } from "react-redux";
import store from "./redux/store";
import TodoApp from "./components/TodoApp";

function App() {
  return (
    <Provider store={store}>
      <TodoApp />
    </Provider>
  );
}

export default App;

✔ Makes Redux state available to the entire app

🧩 Step 5: Create Todo Component (CRUD UI)

📄 components/TodoApp.jsx

import { useDispatch, useSelector } from "react-redux";
import { addTodo, deleteTodo, updateTodo } from "../redux/todoSlice";
import { useState } from "react";

const TodoApp = () => {
  const [text, setText] = useState("");
  const [editId, setEditId] = useState(null);

  const todos = useSelector((state) => state.todo.todos);
  const dispatch = useDispatch();

  const handleAddOrUpdate = () => {
    if (editId) {
      dispatch(updateTodo({ id: editId, text }));
      setEditId(null);
    } else {
      dispatch(
        addTodo({
          id: Date.now(),
          text,
        })
      );
    }
    setText("");
  };

  return (
    <div>
      <h2>Redux Toolkit CRUD Example</h2>

      <input
        type="text"
        value={text}
        placeholder="Enter todo"
        onChange={(e) => setText(e.target.value)}
      />

      <button onClick={handleAddOrUpdate}>
        {editId ? "Update" : "Add"}
      </button>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button
              onClick={() => {
                setEditId(todo.id);
                setText(todo.text);
              }}
            >
              Edit
            </button>
            <button onClick={() => dispatch(deleteTodo(todo.id))}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

🔄 How CRUD Works Internally

➕ Create

dispatch(addTodo({ id, text }))

📖 Read

useSelector((state) => state.todo.todos)

✏ Update

dispatch(updateTodo({ id, text }))

❌ Delete

dispatch(deleteTodo(id))

🧠 Why Redux Toolkit Makes This Easy

✔ No action type constants
✔ No reducers switch-case
✔ Direct state mutation allowed
✔ Clean and readable code

⚠ Common Mistakes

❌ Forgetting to wrap app with Provider
❌ Mutating state manually (not needed in RTK)
❌ Creating one slice for entire app
❌ Putting UI logic inside slices

🎯 Best Practices

✅ One slice per feature
✅ Keep slices small and focused
✅ Use meaningful action names
✅ Use Redux DevTools for debugging

❓ FAQs — Redux Toolkit CRUD

🔹 Is Redux Toolkit good for CRUD apps?

Yes. It is perfect for CRUD and API-based apps.

🔹 Can Redux Toolkit handle API calls?

Yes, using createAsyncThunk (next topics).

🔹 Should I use Redux Toolkit for small apps?

Not necessary. Context API may be enough.

🔹 Is Redux Toolkit used in production?

Yes. It is widely used in real-world applications.

🧠 Quick Recap

✔ Redux Toolkit simplifies CRUD operations
✔ Slices manage state, reducers, and actions
✔ useDispatch updates state
✔ useSelector reads state

🎉 Conclusion

Redux Toolkit makes state management simple, clean, and scalable. With this CRUD example, you now understand how Redux Toolkit works practically, not just theoretically.

You are now ready to handle real-world state management scenarios 🚀

👉 Next Section Begins:

SECTION 6 — API Integration

👉 Next Lesson:
Lesson 29 — Fetch API in React

Leave a Comment