feat: Community 页面引入 Redux 状态管理
- 添加 Redux hooks (useSelector, useDispatch) - 导入 fetchPopularKeywords 和 fetchHotEvents action creators - 移除本地状态 popularKeywords 和 hotEvents - 移除 loadPopularKeywords 和 loadHotEvents 函数 - 使用 Redux dispatch 替代本地数据获取 - 利用 Redux 内置的缓存机制优化性能 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
// src/views/Community/index.js
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useSearchParams, useNavigate } from 'react-router-dom';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { debounce } from 'lodash';
|
||||
import { fetchPopularKeywords, fetchHotEvents } from '../../store/slices/communityDataSlice';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
@@ -88,6 +90,10 @@ const filterLabelMap = {
|
||||
const Community = () => {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// Redux状态
|
||||
const { popularKeywords, hotEvents } = useSelector(state => state.communityData);
|
||||
|
||||
// Chakra UI hooks
|
||||
const bgColor = useColorModeValue('gray.50', 'gray.900');
|
||||
@@ -114,8 +120,6 @@ const Community = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedEvent, setSelectedEvent] = useState(null);
|
||||
const [selectedEventForStock, setSelectedEventForStock] = useState(null);
|
||||
const [popularKeywords, setPopularKeywords] = useState([]);
|
||||
const [hotEvents, setHotEvents] = useState([]);
|
||||
const [lastUpdateTime, setLastUpdateTime] = useState(new Date());
|
||||
|
||||
// 从URL获取筛选参数
|
||||
@@ -177,38 +181,6 @@ const Community = () => {
|
||||
}
|
||||
}, [getFiltersFromUrl, pagination.pageSize]); // ✅ 移除 toast 依赖
|
||||
|
||||
// 加载热门关键词
|
||||
const loadPopularKeywords = useCallback(async () => {
|
||||
try {
|
||||
const response = await eventService.getPopularKeywords(20);
|
||||
if (response.success) {
|
||||
setPopularKeywords(response.data);
|
||||
logger.debug('Community', '热门关键词加载成功', {
|
||||
count: response.data?.length || 0
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Community', 'loadPopularKeywords', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 加载热点事件
|
||||
const loadHotEvents = useCallback(async () => {
|
||||
try {
|
||||
const response = await eventService.getHotEvents({ days: 5, limit: 4 });
|
||||
if (response.success) {
|
||||
setHotEvents(response.data);
|
||||
logger.debug('Community', '热点事件加载成功', {
|
||||
count: response.data?.length || 0
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Community', 'loadHotEvents', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
// 处理筛选变化
|
||||
const handleFilterChange = useCallback((filterType, value) => {
|
||||
updateUrlParams({ [filterType]: value, page: 1 });
|
||||
@@ -294,10 +266,10 @@ const Community = () => {
|
||||
// 使用防抖加载事件
|
||||
debouncedLoadEvents(page);
|
||||
|
||||
// 热门关键词和热点事件不需要防抖(初次加载)
|
||||
// 热门关键词和热点事件不需要防抖(初次加载,使用Redux)
|
||||
if (searchParams.get('page') === null || searchParams.get('page') === '1') {
|
||||
loadPopularKeywords();
|
||||
loadHotEvents();
|
||||
dispatch(fetchPopularKeywords());
|
||||
dispatch(fetchHotEvents());
|
||||
}
|
||||
|
||||
// 组件卸载时取消防抖
|
||||
|
||||
Reference in New Issue
Block a user