测试reducer方式
This commit is contained in:
eson
parent
e2e48c9fea
commit
b699dcdd51
16194
package-lock.json
generated
16194
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
156
src/Main.jsx
156
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,24 +10,7 @@ import ConfigContext from './Config';
|
|||
import MovieCard from './components/MovieCard';
|
||||
import CategoryNav from './components/CategoryNav';
|
||||
|
||||
const Main = () => {
|
||||
const config = useContext(ConfigContext);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const categories = [
|
||||
{ label: '15min', idx: 0 },
|
||||
{ label: '30min', idx: 1 },
|
||||
{ label: '60min', idx: 2 },
|
||||
{ label: '大于60min', idx: 3 },
|
||||
];
|
||||
|
||||
const limit = 20;
|
||||
|
||||
const getInitialParams = () => {
|
||||
const storedParams = localStorage.getItem('params');
|
||||
if (storedParams) {
|
||||
return JSON.parse(storedParams);
|
||||
} else {
|
||||
return {
|
||||
const initialState = {
|
||||
lastCategory: 0,
|
||||
history: {
|
||||
0: { lastPage: 1, scrollPos: 0 },
|
||||
|
|
@ -35,24 +18,55 @@ const Main = () => {
|
|||
2: { lastPage: 1, scrollPos: 0 },
|
||||
3: { lastPage: 1, scrollPos: 0 },
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const [params, setParams] = useState(getInitialParams());
|
||||
|
||||
const [pagination, setPagination] = useState({
|
||||
pagination: {
|
||||
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({
|
||||
type: 'SET_PAGINATION',
|
||||
payload: {
|
||||
pagination: {
|
||||
movies: data.items,
|
||||
page: page,
|
||||
total: data.total,
|
||||
length: Math.ceil(data.total / limit),
|
||||
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 currentPage = params.history[currentCategory].lastPage;
|
||||
const currentCategory = state.lastCategory;
|
||||
const currentPage = state.history[currentCategory].lastPage;
|
||||
fetchMovies(currentCategory, currentPage);
|
||||
}, [fetchMovies, params]);
|
||||
|
||||
const updateParams = useCallback((newParams) => {
|
||||
setParams((prevParams) => {
|
||||
const updatedParams = { ...prevParams, ...newParams };
|
||||
localStorage.setItem('params', JSON.stringify(updatedParams));
|
||||
return updatedParams;
|
||||
});
|
||||
}, []);
|
||||
}, [fetchMovies, state]);
|
||||
|
||||
const handlePageChange = useCallback(
|
||||
(event, page) => {
|
||||
const currentCategory = params.lastCategory;
|
||||
updateParams({
|
||||
history: {
|
||||
...params.history,
|
||||
[currentCategory]: { ...params.history[currentCategory], lastPage: page },
|
||||
},
|
||||
});
|
||||
const currentCategory = state.lastCategory;
|
||||
updateHistory(currentCategory, { ...state.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;
|
||||
updateParams({
|
||||
lastCategory: category,
|
||||
history: {
|
||||
...params.history,
|
||||
[currentCategory]: { ...params.history[currentCategory], scrollPos: window.scrollY },
|
||||
const currentCategory = state.lastCategory;
|
||||
updateHistory(currentCategory, { ...state.history[currentCategory], scrollPos: window.scrollY });
|
||||
updateLastCategory(category);
|
||||
},
|
||||
});
|
||||
},
|
||||
[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;
|
||||
updateParams({
|
||||
history: {
|
||||
...params.history,
|
||||
[currentCategory]: { ...params.history[currentCategory], scrollPos: window.scrollY },
|
||||
},
|
||||
});
|
||||
const currentCategory = state.lastCategory;
|
||||
updateHistory(currentCategory, { ...state.history[currentCategory], scrollPos: window.scrollY });
|
||||
};
|
||||
|
||||
return (
|
||||
<Container style={{ marginTop: 20 }}>
|
||||
<CategoryNav
|
||||
categories={categories}
|
||||
currentCategory={params.lastCategory}
|
||||
categories={config.categories} // 修改这里
|
||||
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}
|
||||
/>
|
||||
)}
|
||||
|
||||
<PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
|
||||
<PaginationWrapper page={state.pagination.page} length={state.pagination.length} onPageChange={handlePageChange} />
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
|
@ -169,7 +164,6 @@ const PaginationWrapper = ({ page, length, onPageChange }) => (
|
|||
</Grid>
|
||||
);
|
||||
|
||||
|
||||
const MoviesGrid = ({ movies, config, onRenderComplete, onMovieCardClick }) => {
|
||||
useEffect(() => {
|
||||
onRenderComplete();
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user