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
|
// src/views/Community/index.js
|
||||||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||||
import { useSearchParams, useNavigate } from 'react-router-dom';
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
||||||
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
|
import { fetchPopularKeywords, fetchHotEvents } from '../../store/slices/communityDataSlice';
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Container,
|
Container,
|
||||||
@@ -88,6 +90,10 @@ const filterLabelMap = {
|
|||||||
const Community = () => {
|
const Community = () => {
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
// Redux状态
|
||||||
|
const { popularKeywords, hotEvents } = useSelector(state => state.communityData);
|
||||||
|
|
||||||
// Chakra UI hooks
|
// Chakra UI hooks
|
||||||
const bgColor = useColorModeValue('gray.50', 'gray.900');
|
const bgColor = useColorModeValue('gray.50', 'gray.900');
|
||||||
@@ -114,8 +120,6 @@ const Community = () => {
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [selectedEvent, setSelectedEvent] = useState(null);
|
const [selectedEvent, setSelectedEvent] = useState(null);
|
||||||
const [selectedEventForStock, setSelectedEventForStock] = useState(null);
|
const [selectedEventForStock, setSelectedEventForStock] = useState(null);
|
||||||
const [popularKeywords, setPopularKeywords] = useState([]);
|
|
||||||
const [hotEvents, setHotEvents] = useState([]);
|
|
||||||
const [lastUpdateTime, setLastUpdateTime] = useState(new Date());
|
const [lastUpdateTime, setLastUpdateTime] = useState(new Date());
|
||||||
|
|
||||||
// 从URL获取筛选参数
|
// 从URL获取筛选参数
|
||||||
@@ -177,38 +181,6 @@ const Community = () => {
|
|||||||
}
|
}
|
||||||
}, [getFiltersFromUrl, pagination.pageSize]); // ✅ 移除 toast 依赖
|
}, [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) => {
|
const handleFilterChange = useCallback((filterType, value) => {
|
||||||
updateUrlParams({ [filterType]: value, page: 1 });
|
updateUrlParams({ [filterType]: value, page: 1 });
|
||||||
@@ -294,10 +266,10 @@ const Community = () => {
|
|||||||
// 使用防抖加载事件
|
// 使用防抖加载事件
|
||||||
debouncedLoadEvents(page);
|
debouncedLoadEvents(page);
|
||||||
|
|
||||||
// 热门关键词和热点事件不需要防抖(初次加载)
|
// 热门关键词和热点事件不需要防抖(初次加载,使用Redux)
|
||||||
if (searchParams.get('page') === null || searchParams.get('page') === '1') {
|
if (searchParams.get('page') === null || searchParams.get('page') === '1') {
|
||||||
loadPopularKeywords();
|
dispatch(fetchPopularKeywords());
|
||||||
loadHotEvents();
|
dispatch(fetchHotEvents());
|
||||||
}
|
}
|
||||||
|
|
||||||
// 组件卸载时取消防抖
|
// 组件卸载时取消防抖
|
||||||
|
|||||||
Reference in New Issue
Block a user