🔥 Redux Toolkit - Build a Complete Todo App | Redux Fundamentals 10 minutes

Screenshot from the tutorial

Building a Complete Todo App with Redux Toolkit

In this blog post, we will walk through the process of building a complete Todo application using Redux Toolkit. Redux Toolkit simplifies state management in React applications and allows developers to write less boilerplate code. In just 10 minutes, we will cover the fundamentals of Redux and how to implement a Todo app from scratch.

What is Redux Toolkit?

Redux Toolkit is the official, recommended way to write Redux logic. It provides a set of tools and best practices to help you manage state in your application efficiently. Some key features of Redux Toolkit include:

• Simplified store setup
• Powerful state management
• Built-in middleware for asynchronous logic
• Easy creation of actions and reducers

Prerequisites

Before we begin, make sure you have the following:

• Basic understanding of JavaScript and React
• Node.js and npm installed on your machine
• Familiarity with React Hooks (useState, useEffect)

Setting Up the Project

Let's create our React application and install the necessary dependencies.

Step 1: Create a React App

Open your terminal and run the following command:

npx create-react-app todo-app

Navigate into your project directory:

cd todo-app

Step 2: Install Redux Toolkit and React-Redux

Install the required packages by running:

npm install @reduxjs/toolkit react-redux

Creating the Redux Store

Step 3: Setting Up the Store

Create a new folder named features in the src directory to hold our Redux logic.

Inside the features folder, create a file called todoSlice.js. This file will hold our state, actions, and reducers.

// src/features/todoSlice.js
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((t) => t.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
    removeTodo: (state, action) => {
      return state.filter((t) => t.id !== action.payload);
    },
  },
});

// Export actions
export const { addTodo, toggleTodo, removeTodo } = todoSlice.actions;

// Export reducer
export default todoSlice.reducer;

Step 4: Configuring the Store

Next, create a file named store.js in the src directory:

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './features/todoSlice';

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

export default store;

Step 5: Integrating Redux Store with React

Now, we need to wrap our application with the Redux Provider. Open src/index.js and update it as follows:

// src/index.js
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')
);

Building the Todo App UI

Step 6: Creating the Todo Component

Now it’s time to create the UI for our Todo application. Open src/App.js and start adding the following code:

// src/App.js
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo, toggleTodo, removeTodo } from './features/todoSlice';

function App() {
  const [inputValue, setInputValue] = useState('');
  const dispatch = useDispatch();
  const todos = useSelector((state) => state.todos);

  const handleAddTodo = () => {
    if (inputValue.trim()) {
      dispatch(addTodo(inputValue));
      setInputValue('');
    }
  };

  return (
    <div>
      <h1>Todo App</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Add a new todo"
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{
                textDecoration: todo.completed ? 'line-through' : 'none',
              }}
              onClick={() => dispatch(toggleTodo(todo.id))}
            >
              {todo.text}
            </span>
            <button onClick={() => dispatch(removeTodo(todo.id))}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Conclusion

Congratulations! You have successfully built a complete Todo app using Redux Toolkit. With just a few lines of code, you have learned how to manage state efficiently using Redux, create a store, and connect it with your React components.

Next Steps

Now that you have a functioning Todo app, consider enhancing it with the following features:

• Persisting todos in local storage
• Adding editing functionality
• Implementing filters (e.g., show all, completed, or active todos)

Explore the capabilities of Redux Toolkit to further improve and scale your applications. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios