React Redux TODO Learn

Step to step guide to build a TODO app with React and Redux

Introduction

Explore the source code for this tutorial on GitHub.

React: Transforming Web Development

React has rapidly gained popularity in the Web Development Industry, as highlighted by the StackOverflow survey of 2019.

React Survey - Stackoverflow

React revolutionizes web UI development, enabling developers to harness their programming skills to craft user interfaces. Unlike the past, where UI development primarily relied on HTML, CSS, Bootstrap, and Photoshop, React has elevated UI development into a programming realm.

Redux: Managing Application State Effectively

Redux is a powerful tool that enables structured and efficient management of application state. Without Redux, passing data as ‘props’ to deeply nested components becomes cumbersome.

Basic Idea of Component-Based Design

React Components Diagram

Let’s Begin: Building a TODO App

We’ll kick off our project by utilizing create-react-app, a tool that sets up a new app and configures essential toolchains like Babel and Webpack.

npx create-react-app todo-app-with-redux

(Note: Use npx for npm version 5.2+)

File Structure

src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

Components: Building Blocks of the App

Let’s break down our application into essential components:

VisibilityFilter Component

// src/components/visibilityFilter.jsx
import React from 'react'

export default function VisibilityFilter({ filters }) {
    return (
        filters.map((filter, i) => <button key={`filter-${i}`}>{filter}</button>)
    )
}

TodoList Component

// src/components/todoList.jsx
import React from 'react'

const Todo = ({ todo }) => <li>{todo.content}</li>

export default function TodoList({ todos }) {
    return (
        todos.map((todo, i) => (
            <Todo key={i} todo={todo} />
        ))
    )
}

AddTodo Component

// src/components/addTodo.jsx
import React from 'react'

export default function AddTodo() {
    return (
        <>
            <input type="text" placeholder="Your text here" />
            <button>Add</button>
        </>
    )
}

Main App Component

// src/App.jsx
import React from 'react';
import './App.css';
import AddTodo from './components/addTodo'
import TodoList from './components/todoList'
import VisibilityFilter from './components/visibilityFilter'

const filters = ['all', 'completed', 'incomplete']
function App() {
  return (
    <div className="App">
      <h1>TODO Manager</h1>
      <AddTodo/>
      <TodoList todos={[{content: 'Task 1'}, {content: 'Task 2'}]}/>
      <VisibilityFilter filters={filters}/>
    </div>
  );
}

export default App;

Introducing Redux: Managing Application State

Let’s integrate Redux to manage data flow and actions in our application effectively.

Action Types

// src/redux/actionTypes.js
export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const DELETE_TODO = 'DELETE_TODO'
export const SET_FILTER = 'SET_FILTER'

export const FILTER_ALL = 'all'
export const FILTER_COMPLETED = 'completed'
export const FILTER_INCOMPLETE = 'incomplete'
export const Filters = [FILTER_ALL, FILTER_COMPLETED, FILTER_INCOMPLETE]

Action Creators

// src/redux/actions.js
import { ADD_TODO, TOGGLE_TODO, DELETE_TODO, SET_FILTER } from './actionTypes'

export const addTodo = (content) => (
    {
        type: ADD_TODO,
        payload: {
            content
        }
    }
)

// More action creators...

Reducers

// src/redux/reducers.js
import { FILTER_ALL } from './actionTypes'
import { ADD_TODO, TOGGLE_TODO, DELETE_TODO, SET_FILTER } from './actionTypes'

// Reducers for managing application state...

Store Configuration

// src/redux/store.js
import { createStore, combineReducers } from 'redux'
import { todos, visibilityFilter } from './reducers'

export default createStore(
    combineReducers({ todos, visibilityFilter }),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

Connecting Components with Redux

Update components to connect with the Redux store.

// src/components/addTodo.jsx
// Updated to connect with Redux

// src/components/todoList.jsx
// Updated to connect with Redux

// src/components/visibilityFilter.jsx
// Updated to connect with Redux

Conclusion

With Redux now integrated into our TODO app, we have enhanced its functionality and manageability. Feel free to experiment and further enhance this application. Happy coding!