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:
zdl
2025-10-26 14:33:39 +08:00
parent 3580385967
commit 3d90ae7f74

View File

@@ -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());
}
// 组件卸载时取消防抖