Move reducer out of store.ts

src/App.tsx

@@ -3,7 +3,7 @@ import { useSelector, useDispatch } from "react-redux";
 
 import Todo from "./Todo";
 import {TodoItem} from "./types";
-import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from "./store";
+import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from "./reducers";
 
 function App() {
     const [text, setText] = useState("");

src/reducers.ts

@@ -0,0 +1,60 @@
+import { TodoItem } from "./types";
+
+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;
+    }
+}

src/store.ts

@@ -1,65 +1,5 @@
 import { createStore } from "redux";
 
-import { TodoItem } from "./types";
+import { todoReducer } from "./reducers";
-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);