Change state management from React hook to pure Redux

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,11 +1,14 @@
 import React, {useState} from 'react';
-import './App.css';
+import { useSelector, useDispatch } from "react-redux";
+
 import Todo from "./Todo";
 import {TodoItem} from "./types";
+import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from "./store";
 
 function App() {
-    const [todos, setTodos] = useState<TodoItem[]>([]);
     const [text, setText] = useState("");
+    const todos = useSelector((state: { todos: TodoItem[] }) => state.todos);
+    const dispatch = useDispatch();
 
     const handleAddTodo = () => {
         if (text.trim() === "") return;
@@ -15,24 +18,16 @@ function App() {
             completed: false,
         };
 
-        setTodos([...todos, newTodo]);
+        dispatch({ type: ADD_TODO, payload: newTodo});
         setText("");
     }
 
     const handleToggleTodo = (id: number) => {
-        const updatedTodos = todos.map((todo) => {
+        dispatch({ type: TOGGLE_TODO, payload: id});
-            if (todo.id === id) {
-                return {...todo, completed: !todo.completed};
-            }
-            return todo;
-        });
-
-        setTodos(updatedTodos);
     }
 
     const handleDeleteTodo = (id: number) => {
-        const updatedTodos = todos.filter((todo) => todo.id !== id);
+        dispatch({ type: DELETE_TODO, payload: id});
-        setTodos(updatedTodos);
     }
 
     return (

src/index.tsx

@@ -1,19 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom";
-import './index.css';
+import { Provider } from "react-redux";
+import { store } from "./store";
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
-const root = ReactDOM.createRoot(
+ReactDOM.render(
-  document.getElementById('root') as HTMLElement
+    <Provider store={store}>
-);
+        <App />
-root.render(
+    </Provider>,
-  <React.StrictMode>
+    document.getElementById("root")
-    <App />
+)
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/store.ts

@@ -0,0 +1,65 @@
+import { createStore } from "redux";
+
+import { TodoItem } from "./types";
+import {stat} from "fs";
+
+interface TodoState {
+    todos: TodoItem[];
+}
+
+const initialState: TodoState = {
+    todos: [],
+}
+
+export const ADD_TODO = "ADD_TODO";
+export const TOGGLE_TODO = "TOGGLE_TODO";
+export const DELETE_TODO = "DELETE_TODO";
+
+interface AddTodoAction {
+    type: typeof ADD_TODO;
+    payload: TodoItem;
+}
+
+interface ToggleTodoAction {
+    type: typeof TOGGLE_TODO;
+    payload: number;
+}
+
+interface DeleteTodoAction {
+    type: typeof DELETE_TODO;
+    payload: number;
+}
+
+type TodoActionTypes = AddTodoAction | ToggleTodoAction | DeleteTodoAction;
+
+export function todoReducer(
+    state = initialState,
+    action: TodoActionTypes
+): TodoState {
+    switch (action.type) {
+        case ADD_TODO:
+            return {
+                ...state,
+                todos: [...state.todos, action.payload],
+            };
+        case TOGGLE_TODO:
+            return {
+                ...state,
+                todos: state.todos.map((todo) => {
+                    if (todo.id === action.payload) {
+                        return { ...todo, completed: !todo.completed };
+                    }
+                    return todo;
+                }),
+            };
+        case DELETE_TODO:
+            return {
+                ...state,
+                todos: state.todos.filter((todo) => todo.id !== action.payload),
+            };
+        default:
+            return state;
+    }
+}
+
+export const store = createStore(todoReducer);