Redux Toolkit Todo App Guide

Introduction

Redux Toolkit (RTK) is the official, recommended approach for writing Redux logic. It simplifies Redux development by reducing boilerplate code and providing powerful utilities. This guide will walk you through building a simple Todo App using Redux Toolkit in a React project.

Features of Redux Toolkit

• Simplifies setup: Includes pre-configured store setup with configureStore().
• Built-in Immer: Allows writing reducers with mutable syntax while keeping state immutable.
• Create slices: Combines actions and reducers into a single entity.
• Built-in thunk support: Handles asynchronous logic easily.
• Better developer experience: Works seamlessly with Redux DevTools.

Installation

To use Redux Toolkit with React, install the necessary dependencies:

npm install @reduxjs/toolkit react-redux

Creating a Redux Toolkit Todo Store

1. Defining the Slice

A slice is a collection of Redux reducer logic and actions for a specific feature.

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

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({ id: Date.now(), text: action.payload, completed: false });
    },
    toggleTodo: (state, action) => {
      const todo = state.find(todo => todo.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    }
  }
});

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

2. Creating the Store

Use configureStore() instead of createStore() to automatically set up Redux DevTools and middleware.

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

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

export default store;

Connecting Redux Toolkit to React

Use react-redux to connect Redux Toolkit to React components.

1. Setting up the Provider

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

2. Using useSelector and useDispatch in the Todo App

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, toggleTodo } from './todoSlice';

const TodoApp = () => {
  const [text, setText] = useState('');
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    if (text.trim() !== '') {
      dispatch(addTodo(text));
      setText('');
    }
  };

  return (
    <div>
      <h2>Todo List</h2>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <li 
            key={todo.id} 
            onClick={() => dispatch(toggleTodo(todo.id))} 
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

Conclusion

Redux Toolkit simplifies Redux state management by reducing boilerplate code and improving performance. This guide demonstrated how to use createSlice(), configureStore(), and React-Redux hooks to build a Todo App. For more details, check the official Redux Toolkit documentation.

Interview angle

• “What problem does Redux Toolkit solve?” - the boilerplate that made classic Redux unpleasant: hand-written action types, action creators, switch reducers, immutable spread chains and store wiring. createSlice generates the actions and reducer from one object; configureStore sets up middleware and DevTools.
• “How can reducers look mutating?” - Immer. RTK runs your reducer against a draft proxy and produces an immutable next state from the recorded changes. It only works inside createSlice/createReducer - the same code elsewhere really does mutate.
• “Thunk or RTK Query?” - RTK Query for server data: it gives caching, deduplication, invalidation and loading state for free, and removes most of the hand-written async slices people write. createAsyncThunk for genuine one-off async logic that is not a data fetch.
• “Do you even need Redux now?” - often not. Server state belongs in a query library, and modest client state in component state, context, or a small store like Zustand. Redux earns its place when you need a large shared state graph, strict traceability, or time-travel debugging.