Summary

src/components/TodoList.jsx

@@ -10,27 +10,24 @@ import Pagination from '../utils/Pagination';
 const PAGE_SIZE = 5;
 
 const TodoList = () => {
+  const dispatch = useDispatch();
   const todos = useSelector(selectTodo);
-  const reversedTodos = [...todos].reverse();
   const [currentPage, setCurrentPage] = useState(0);
-  const dispatch = useDispatch();
-
-  const paginatedTodos = reversedTodos.slice(
-    currentPage * PAGE_SIZE,
-    (currentPage + 1) * PAGE_SIZE,
-  );
-
   const [items, setItems] = useState([]);
 
-  useEffect(() => {
-    setItems(paginatedTodos);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentPage, todos]);
-
   useEffect(() => {
     dispatch(fetchTodos());
   }, [dispatch]);
 
+  useEffect(() => {
+    const reversed = [...todos].reverse();
+    const paginatedTodos = reversed.slice(
+      currentPage * PAGE_SIZE,
+      (currentPage + 1) * PAGE_SIZE,
+    );
+    setItems(paginatedTodos);
+  }, [currentPage, todos]);
+
   const handlePageChange = ({ selected }) => {
     setCurrentPage(selected);
   };

src/redux/store.js

@@ -6,6 +6,7 @@ import todoReducer from './todoSlice';
 const persistConfig = {
   key: 'root',
   storage,
+  whitelist: ['todos'],
 };
 
 const persistedReducer = persistReducer(