测试reducer方式

package.json

@@ -21,7 +21,8 @@
     "react-swipe-handler": "^1.1.2",
     "react-swipeable": "^7.0.1",
     "swipeable": "^1.0.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yarn": "^1.22.19"
   },
   "scripts": {
     "start": "react-scripts start",

src/Main.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useCallback } from 'react';
+import React, { useState, useEffect, useContext, useCallback, useReducer } from 'react';
 import axios from 'axios';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
@@ -10,49 +10,63 @@ import ConfigContext from './Config';
 import MovieCard from './components/MovieCard';
 import CategoryNav from './components/CategoryNav';
 
-const Main = () => {
+const initialState = {
-  const config = useContext(ConfigContext);
+  lastCategory: 0,
-  const [loading, setLoading] = useState(false);
+  history: {
-  const categories = [
+    0: { lastPage: 1, scrollPos: 0 },
-    { label: '15min', idx: 0 },
+    1: { lastPage: 1, scrollPos: 0 },
-    { label: '30min', idx: 1 },
+    2: { lastPage: 1, scrollPos: 0 },
-    { label: '60min', idx: 2 },
+    3: { lastPage: 1, scrollPos: 0 },
-    { label: '大于60min', idx: 3 },
+  },
-  ];
+  pagination: {
-
-  const limit = 20;
-
-  const getInitialParams = () => {
-    const storedParams = localStorage.getItem('params');
-    if (storedParams) {
-      return JSON.parse(storedParams);
-    } else {
-      return {
-        lastCategory: 0,
-        history: {
-          0: { lastPage: 1, scrollPos: 0 },
-          1: { lastPage: 1, scrollPos: 0 },
-          2: { lastPage: 1, scrollPos: 0 },
-          3: { lastPage: 1, scrollPos: 0 },
-        },
-      };
-    }
-  };
-
-  const [params, setParams] = useState(getInitialParams());
-
-  const [pagination, setPagination] = useState({
     movies: [],
-    page: params.history[params.lastCategory].lastPage,
+    page: 1,
     total: 1,
     length: 1,
-  });
+  },
+  loading: false,
+};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'UPDATE_LAST_CATEGORY':
+      return { ...state, lastCategory: action.payload.lastCategory };
+    case 'UPDATE_HISTORY':
+      return {
+        ...state,
+        history: {
+          ...state.history,
+          [action.payload.category]: action.payload.newData,
+        },
+      };
+    case 'SET_PAGINATION':
+      return { ...state, pagination: action.payload.pagination };
+    case 'SET_LOADING':
+      return { ...state, loading: action.payload.loading };
+    default:
+      return state;
+  }
+}
+
+const Main = () => {
+  const config = useContext(ConfigContext);
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const updateLastCategory = useCallback((newCategory) => {
+    dispatch({ type: 'UPDATE_LAST_CATEGORY', payload: { lastCategory: newCategory } });
+  }, []);
+
+  const updateHistory = useCallback((category, newData) => {
+    dispatch({ type: 'UPDATE_HISTORY', payload: { category, newData } });
+  }, []);
 
   const fetchMovies = useCallback(async (category, page) => {
-    setLoading(true);
+    dispatch({ type: 'SET_LOADING', payload: { loading: true } });
+
     try {
       const response = await axios.get(
-        `${config.Host}/movie/?page=${page}&limit=${limit}&category=${category}`
+        `${config.Host}/movie/?page=${page}&limit=${config.limit}&category=${category}` // 修改这里
       );
 
       if (response.status === 200) {
@@ -61,104 +75,85 @@ const Main = () => {
         if (data.items.length === 0 && page > 1) {
           fetchMovies(category, page - 1);
         } else {
-          setPagination({
+          dispatch({
-            movies: data.items,
+            type: 'SET_PAGINATION',
-            page: page,
+            payload: {
-            total: data.total,
+              pagination: {
-            length: Math.ceil(data.total / limit),
+                movies: data.items,
+                page: page,
+                total: data.total,
+                length: Math.ceil(data.total / config.limit), // 修改这里
+              },
+            },
           });
         }
       }
     } catch (error) {
       console.error('Error fetching movies:', error);
     } finally {
-      setLoading(false);
+      dispatch({ type: 'SET_LOADING', payload: { loading: false } });
     }
-  }, [config.Host, limit]);
+  }, [config.Host, config.limit]); // 修改这里
 
   useEffect(() => {
-    const currentCategory = params.lastCategory;
+    const currentCategory = state.lastCategory;
-    const currentPage = params.history[currentCategory].lastPage;
+    const currentPage = state.history[currentCategory].lastPage;
     fetchMovies(currentCategory, currentPage);
-  }, [fetchMovies, params]);
+  }, [fetchMovies, state]);
-
-  const updateParams = useCallback((newParams) => {
-    setParams((prevParams) => {
-      const updatedParams = { ...prevParams, ...newParams };
-      localStorage.setItem('params', JSON.stringify(updatedParams));
-      return updatedParams;
-    });
-  }, []);
 
   const handlePageChange = useCallback(
     (event, page) => {
-      const currentCategory = params.lastCategory;
+      const currentCategory = state.lastCategory;
-      updateParams({
+      updateHistory(currentCategory, { ...state.history[currentCategory], lastPage: page });
-        history: {
-          ...params.history,
-          [currentCategory]: { ...params.history[currentCategory], lastPage: page },
-        },
-      });
       fetchMovies(currentCategory, page);
     },
-    [fetchMovies, params, updateParams]
+    [fetchMovies, state, updateHistory]
   );
 
-  // 导致递归刷新
   const handleCategoryChange = useCallback(
     (category) => {
-      const currentPage = params.history[category].lastPage;
+      const currentPage = state.history[category].lastPage;
       fetchMovies(category, currentPage);
 
-      const currentCategory = params.lastCategory;
+      const currentCategory = state.lastCategory;
-      updateParams({
+      updateHistory(currentCategory, { ...state.history[currentCategory], scrollPos: window.scrollY });
-        lastCategory: category,
+      updateLastCategory(category);
-        history: {
-          ...params.history,
-          [currentCategory]: { ...params.history[currentCategory], scrollPos: window.scrollY },
-        },
-      });
     },
-    [fetchMovies, params, updateParams]
+    [fetchMovies, state, updateHistory, updateLastCategory]
   );
 
   const handleRenderComplete = useCallback(() => {
-    const { scrollPos } = params.history[params.lastCategory];
+    const { scrollPos } = state.history[state.lastCategory];
     window.scrollTo(0, scrollPos);
-  }, [params]);
+  }, [state]);
 
   const handleMovieCardClick = () => {
-    const currentCategory = params.lastCategory;
+    const currentCategory = state.lastCategory;
-    updateParams({
+    updateHistory(currentCategory, { ...state.history[currentCategory], scrollPos: window.scrollY });
-      history: {
-        ...params.history,
-        [currentCategory]: { ...params.history[currentCategory], scrollPos: window.scrollY },
-      },
-    });
   };
 
   return (
     <Container style={{ marginTop: 20 }}>
       <CategoryNav
-        categories={categories}
+        categories={config.categories} // 修改这里
-        currentCategory={params.lastCategory}
+        currentCategory={state.lastCategory} // 修改这里
         onCategoryChange={handleCategoryChange}
       />
 
-      <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
+      <PaginationWrapper page={state.pagination.page} length={state.pagination.length} onPageChange={handlePageChange} />
 
-      {loading ? (
+      {state.loading ? (
         <Loading />
       ) : (
         <MoviesGrid
-          movies={pagination.movies}
+          movies={state.pagination.movies}
           config={config}
           onRenderComplete={handleRenderComplete}
-         onMovieCardClick={handleMovieCardClick}
+          onMovieCardClick={handleMovieCardClick}
         />
       )}
 
-      <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
+      <PaginationWrapper page={state.pagination.page} length={state.pagination.length} onPageChange={handlePageChange} />
     </Container>
   );
 };
@@ -168,7 +163,6 @@ const PaginationWrapper = ({ page, length, onPageChange }) => (
     <Pagination count={length} page={page} onChange={onPageChange} />
   </Grid>
 );
- 
 
 const MoviesGrid = ({ movies, config, onRenderComplete, onMovieCardClick }) => {
   useEffect(() => {
@@ -185,7 +179,7 @@ const MoviesGrid = ({ movies, config, onRenderComplete, onMovieCardClick }) => {
           <Link
             to={`/res/${item.filename}`}
             style={{ textDecoration: 'none', paddingBottom: 10 }}
-            onClick={onMovieCardClick} // 修改这里
+            onClick={onMovieCardClick}
           >
             <MovieCard movie={item} config={config} />
           </Link>