solution

src/App.tsx

@@ -1,26 +1,51 @@
+import React, { useEffect, useState } from 'react';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
-import { Loader, TodoFilter, TodoList, TodoModal } from './components';
 
-export const App = () => (
-  <>
-    <div className="section">
-      <div className="container">
-        <div className="box">
-          <h1 className="title">Todos:</h1>
+import { TodoList } from './components/TodoList';
+import { TodoFilter } from './components/TodoFilter';
+import { TodoModal } from './components/TodoModal';
+import { Loader } from './components/Loader';
+import { getTodos } from './api';
+import { useAppSelector } from './app/hooks';
+import { useDispatch } from 'react-redux';
+import { setTodos } from './features/todos';
 
-          <div className="block">
-            <TodoFilter />
-          </div>
+export const App: React.FC = () => {
+  const dispatch = useDispatch();
+  const todos = useAppSelector(state => state.todos);
+  const currentTodo = useAppSelector(state => state.currentTodo);
+  const [loader, setLoader] = useState(false);
+
+  useEffect(() => {
+    setLoader(true);
+    getTodos()
+      .then(getTodo => {
+        dispatch(setTodos(getTodo));
+      })
+      .finally(() => setLoader(false));
+  }, [dispatch]);
+
+  return (
+    <>
+      <div className="section">
+        <div className="container">
+          <div className="box">
+            <h1 className="title">Todos:</h1>
+
+            <div className="block">
+              <TodoFilter />
+            </div>
 
-          <div className="block">
-            <Loader />
-            <TodoList />
+            <div className="block">
+              {loader && <Loader />}
+              {!loader && !!todos.length && <TodoList />}
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <TodoModal />
-  </>
-);
+      {currentTodo && <TodoModal />}
+    </>
+  );
+};

src/app/hooks.ts

@@ -0,0 +1,4 @@
+import { TypedUseSelectorHook, useSelector } from 'react-redux';
+import { RootState } from './store';
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/app/store.ts

@@ -1,6 +1,9 @@
 import { combineSlices, configureStore } from '@reduxjs/toolkit';
+import { todosSlice } from '../features/todos';
+import { filterSlice } from '../features/filter';
+import { currentTodoSlice } from '../features/currentTodo';
 
-const rootReducer = combineSlices();
+const rootReducer = combineSlices(todosSlice, filterSlice, currentTodoSlice);
 
 export const store = configureStore({
   reducer: rootReducer,

src/components/TodoFilter/TodoFilter.tsx

@@ -1,17 +1,29 @@
 import React from 'react';
+import { Status } from '../../types/Status';
+import { useAppSelector } from '../../app/hooks';
+import { useDispatch } from 'react-redux';
+import { setQuery, setStatus } from '../../features/filter';
 
 export const TodoFilter: React.FC = () => {
+  const dispatch = useDispatch();
+  const { query, status } = useAppSelector(state => state.filter);
+
+  const handleQuery = (event: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(setQuery(event.target.value));
+  };
+
+  const handleStatus = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    dispatch(setStatus(event.target.value));
+  };
+
   return (
-    <form
-      className="field has-addons"
-      onSubmit={event => event.preventDefault()}
-    >
+    <form className="field has-addons">
       <p className="control">
         <span className="select">
-          <select data-cy="statusSelect">
-            <option value="all">All</option>
-            <option value="active">Active</option>
-            <option value="completed">Completed</option>
+          <select data-cy="statusSelect" onChange={handleStatus} value={status}>
+            <option value={Status.All}>All</option>
+            <option value={Status.Active}>Active</option>
+            <option value={Status.Completed}>Completed</option>
           </select>
         </span>
       </p>
@@ -22,18 +34,22 @@ export const TodoFilter: React.FC = () => {
           type="text"
           className="input"
           placeholder="Search..."
+          value={query}
+          onChange={handleQuery}
         />
         <span className="icon is-left">
           <i className="fas fa-magnifying-glass" />
         </span>
 
         <span className="icon is-right" style={{ pointerEvents: 'all' }}>
-          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-          <button
-            data-cy="clearSearchButton"
-            type="button"
-            className="delete"
-          />
+          {!!query.length && (
+            <button
+              data-cy="clearSearchButton"
+              type="button"
+              className="delete"
+              onClick={() => dispatch(setQuery(''))}
+            />
+          )}
         </span>
       </p>
     </form>