Todo using useReducer in React

#react #usereducer

What is React?

React is ajavaScript library that use to build our user interface for applications.

What is`useReducer`

useReducer is a react hook that is used to implement our complex state of applications.

In this simple todo app I have used react with typescript template
Step 1:
First of all, create a project called todo usingcreate-react-app
npx create-react-app todo --template typescript
After creating the projectcd to todo folder then run
npm start oryarn start

Step 2:

Create two folder calledcontainers ,components
Create a file calledTodos.tsx in containers
Import Todos.tsx file in App.tsx and use it

import*asReactfrom"react";importTodosfrom"./container/Todos";constApp:React.FC=()=>{return<Todos/>;};exportdefaultApp;

Create an interface that will represent the blueprint of a todo item in Todos.tsx file

exportinterfaceTodosProps{id:string;todoName:string;isComplete:boolean;}

Create interfaces for various activities of the app like add todo item, remove todo item and toggle the todo to check that todo item is completed or not

interfaceAddTodoAction{type:"ADD_TODO";payload:{name:string};}interfaceModifyTodoAction{type:"TOGGLE_TODO"|"DELETE_TODO";payload:{id:string};}

action type

exporttypeTodoAction=AddTodoAction|ModifyTodoAction

Create a reducer function called todoReducer that is used with useReducer to control the state with action.

consttodoReducer=(todos:Array<TodosProps>,action:TodoAction)=>{switch(action.type){case"ADD_TODO":return[...todos,newTodo(action.payload.name)];case"TOGGLE_TODO":returntodos.map((todo)=>{if(todo.id===action.payload.id){return{...todo,isComplete:!todo.isComplete};}returntodo;});case"DELETE_TODO":returntodos.filter((todo)=>todo.id!==action.payload.id);default:returntodos;}};

Create a new todo item structure with this function

constnewTodo=(todoName:string):TodosProps=>{return{id:uuidv4(),todoName:todoName,isComplete:false};};

Todos.tsx

import*asReactfrom"react";import{useReducer}from"react";import{v4asuuidv4}from"uuid";importTodofrom"../components/Todo";importTodoInputfrom"../components/TodoInput";exportinterfaceTodosProps{id:string;todoName:string;isComplete:boolean;}interfaceAddTodoAction{type:"ADD_TODO";payload:{name:string};}interfaceModifyTodoAction{type:"TOGGLE_TODO"|"DELETE_TODO";payload:{id:string};}exporttypeTodoAction=AddTodoAction|ModifyTodoAction;consttodoReducer=(todos:Array<TodosProps>,action:TodoAction)=>{switch(action.type){case"ADD_TODO":return[...todos,newTodo(action.payload.name)];case"TOGGLE_TODO":returntodos.map((todo)=>{if(todo.id===action.payload.id){return{...todo,isComplete:!todo.isComplete};}returntodo;});case"DELETE_TODO":returntodos.filter((todo)=>todo.id!==action.payload.id);default:returntodos;}};constnewTodo=(todoName:string):TodosProps=>{return{id:uuidv4(),todoName:todoName,isComplete:false};};constTodos:React.FC=()=>{const[todos,dispatch]=useReducer(todoReducer,[]);constrenderTodos=todos.map((todo)=>(<Todokey={todo.id}id={todo.id}todoName={todo.todoName}isComplete={todo.isComplete}dispatch={dispatch}/>));console.log(todos);return(<div><TodoInputdispatch={dispatch}/>{renderTodos}</div>);};exportdefaultTodos;

Create a file calledTodoInput.tsx in components folder

TodoInput.tsx

This component is responsible for rendering a form with an input field and a submit button

import*asReactfrom"react";import{useState}from"react";import{TodoAction}from"../container/Todos";interfaceTodoInputProps{dispatch:React.Dispatch<TodoAction>;}constTodoInput:React.FC<TodoInputProps>=({dispatch})=>{const[todoName,setTodoName]=useState("");consthandleChange=(evt:React.FormEvent<HTMLInputElement>)=>{setTodoName(evt.currentTarget.value);};consthandleSubmit=(evt:React.FormEvent)=>{evt.preventDefault();dispatch({type:"ADD_TODO",payload:{name:todoName}});setTodoName("");};return(<formonSubmit={handleSubmit}><inputtype="text"placeholder="Type your todo...."value={todoName}onChange={handleChange}/><buttontype="submit">AddTodo</button></form>);};exportdefaultTodoInput;

Display all todo item in Todo.tsx file in components folder

import*asReactfrom"react";import{TodosProps,TodoAction}from"../container/Todos";exportinterfacePropsextendsTodosProps{dispatch:React.Dispatch<TodoAction>;}constTodo:React.FC<Props>=({dispatch,id,isComplete,todoName})=>{consthandleDelete=(id:string)=>{dispatch({type:"DELETE_TODO",payload:{id:id},});};consthandleToggle=(id:string)=>{dispatch({type:"TOGGLE_TODO",payload:{id:id},});};return(<div><div><pstyle={{textDecoration:`${isComplete?"line-through":""}`}}>{todoName}</p></div><div><buttononClick={()=>handleToggle(id)}>Toggle</button><buttononClick={()=>handleDelete(id)}>Delete</button></div></div>);};exportdefaultTodo;