🚀 Advanced Redux Todo List: Filtering Todos in React

Screenshot from the tutorial

Advanced Redux Todo List: Filtering Todos in React

In this blog post, we will delve into an advanced topic for managing state in a React application using Redux. Specifically, we will focus on how to implement filtering functionality for a Todo List. This feature allows users to view their tasks based on specific criteria, enhancing the overall user experience.

Table of Contents

• Prerequisites
• Setting Up the Project
• Understanding Redux
• Creating the Todo Slice
• Implementing Filtering
• Connecting Components
• Conclusion

Prerequisites

Before we start, ensure you have the following:

• Basic knowledge of React and Redux
• Node.js and npm installed on your machine
• A code editor (like VS Code)

Setting Up the Project

First, let's set up a new React application. Open your terminal and run:

npx create-react-app advanced-redux-todo
cd advanced-redux-todo
npm install redux react-redux

This command creates a new React application and installs the necessary dependencies for Redux.

Understanding Redux

Redux is a state management library for JavaScript applications. It allows you to manage the application state globally, making it easier to share data between components. The core components of Redux include:

• Store: A single source of truth for the application state.
• Actions: Payloads of information that send data from the application to the Redux store.
• Reducers: Functions that specify how the application's state changes in response to actions.

Creating the Todo Slice

Now, let's create a slice for our Todo application. Create a new folder called features inside the src directory, and then create a file named todoSlice.js.

// src/features/todoSlice.js
import { createSlice } from '@reduxjs/toolkit';

const todoSlice = createSlice({
  name: 'todos',
  initialState: {
    items: [],
    filter: 'all', // filter options: all, completed, active
  },
  reducers: {
    addTodo: (state, action) => {
      state.items.push(action.payload);
    },
    toggleTodo: (state, action) => {
      const todo = state.items.find(item => item.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
    setFilter: (state, action) => {
      state.filter = action.payload;
    },
  },
});

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

In this slice, we define an initial state with an array of items and a filter property. The reducers allow us to add new todos, toggle their completion status, and set the current filter.

Implementing Filtering

Next, we need to implement the filtering logic. Create a new file called TodoList.js inside the src/components directory. Here’s how it looks:

// src/components/TodoList.js
import React from 'react';
import { useSelector } from 'react-redux';

const TodoList = () => {
  const todos = useSelector(state => state.todos.items);
  const filter = useSelector(state => state.todos.filter);

  const filteredTodos = todos.filter(todo => {
    if (filter === 'completed') return todo.completed;
    if (filter === 'active') return !todo.completed;
    return true; // 'all'
  });

  return (
    <ul>
      {filteredTodos.map(todo => (
        <li key={todo.id}>
          {todo.text} {todo.completed ? '(Completed)' : ''}
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

In this component, we use the useSelector hook to access the todos and filter from the Redux store. We then filter the todos based on the current filter state.

Connecting Components

We now need to connect everything together. Create another component called Filter.js for the filter buttons:

// src/components/Filter.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { setFilter } from '../features/todoSlice';

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

  return (
    <div>
      <button onClick={() => dispatch(setFilter('all'))}>All</button>
      <button onClick={() => dispatch(setFilter('active'))}>Active</button>
      <button onClick={() => dispatch(setFilter('completed'))}>Completed</button>
    </div>
  );
};

export default Filter;

Finally, integrate these components in your main App.js:

// src/App.js
import React from 'react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './features/todoSlice';
import TodoList from './components/TodoList';
import Filter from './components/Filter';

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

function App() {
  return (
    <Provider store={store}>
      <h1>Todo List</h1>
      <Filter />
      <TodoList />
    </Provider>
  );
}

export default App;

Conclusion

In this tutorial, we have learned how to create an advanced Todo List application using Redux and React. We implemented filtering functionality that allows users to view their tasks based on their status: all, active, or completed. This enhances the user experience and showcases the power of Redux in managing application state.

Feel free to expand upon this project by adding features like editing or deleting todos, persisting state, or even adding user authentication. 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