diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx index e610ece..2a78a28 100644 --- a/src/components/TodoList.jsx +++ b/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); }; diff --git a/src/redux/store.js b/src/redux/store.js index 1f2ab0a..b1b2021 100644 --- a/src/redux/store.js +++ b/src/redux/store.js @@ -6,6 +6,7 @@ import todoReducer from './todoSlice'; const persistConfig = { key: 'root', storage, + whitelist: ['todos'], }; const persistedReducer = persistReducer(