vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(watchlist): 自选股数据源统一到 Redux

Browse Source 
- stockSlice: 新增 loadWatchlistQuotes thunk 加载自选股行情
- useWatchlist: 改用 Redux selector 获取自选股数据
- WatchlistMenu: 使用 Redux 数据源，移除本地状态管理

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-23 20:09:06 +08:00
parent 60aa5c80a5
commit b578504591
3 changed files with 260 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Navbars/components/FeatureMenus/WatchlistMenu.js
View File

@@ -1,7 +1,7 @@
// src/components/Navbars/components/FeatureMenus/WatchlistMenu.js
// 自选股下拉菜单组件
import React, { memo } from 'react';
import React, { memo, useState } from 'react';
import {
Menu,
MenuButton,
@@ -21,6 +21,7 @@ import { ChevronDownIcon } from '@chakra-ui/icons';
import { FiStar } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';
import { useWatchlist } from '../../../../hooks/useWatchlist';
import FavoriteButton from '@/components/FavoriteButton';
/**
* 自选股下拉菜单组件
@@ -29,6 +30,7 @@ import { useWatchlist } from '../../../../hooks/useWatchlist';
*/
const WatchlistMenu = memo(() => {
const navigate = useNavigate();
const [removingCode, setRemovingCode] = useState(null);
const {
watchlistQuotes,
watchlistLoading,
@@ -39,6 +41,17 @@ const WatchlistMenu = memo(() => {
handleRemoveFromWatchlist
} = useWatchlist();
// 处理取消关注（带 loading 状态）
const handleUnwatch = async (stockCode) => {
if (removingCode) return;
setRemovingCode(stockCode);
try {
await handleRemoveFromWatchlist(stockCode);
} finally {
setRemovingCode(null);
}
};
const titleColor = useColorModeValue('gray.600', 'gray.300');
const loadingTextColor = useColorModeValue('gray.500', 'gray.300');
const emptyTextColor = useColorModeValue('gray.500', 'gray.300');
@@ -114,21 +127,19 @@ const WatchlistMenu = memo(() => {
(item.current_price || '-')}
</Text>
<Box
as="span"
fontSize="xs"
color="red.500"
cursor="pointer"
px={2}
py={1}
borderRadius="md"
_hover={{ bg: 'red.50' }}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleRemoveFromWatchlist(item.stock_code);
}}
>
取消
<FavoriteButton
isFavorite={true}
isLoading={removingCode === item.stock_code}
onClick={() => handleUnwatch(item.stock_code)}
size="sm"
colorScheme="gold"
showTooltip={true}
/>
</Box>
</HStack>
</HStack>

117
src/hooks/useWatchlist.js
View File

@@ -1,12 +1,16 @@
// src/hooks/useWatchlist.js
// 自选股管理自定义 Hook（导航栏专用，与 Redux 状态同步）
// 自选股管理自定义 Hook（与 Redux 状态同步，支持多组件共用）
import { useState, useCallback, useEffect, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useToast } from '@chakra-ui/react';
import { logger } from '../utils/logger';
import { getApiBase } from '../utils/apiConfig';
import { toggleWatchlist as toggleWatchlistAction, loadWatchlist } from '../store/slices/stockSlice';
import {
toggleWatchlist as toggleWatchlistAction,
loadWatchlist,
loadWatchlistQuotes
} from '../store/slices/stockSlice';
const WATCHLIST_PAGE_SIZE = 10;
@@ -31,20 +35,18 @@ const WATCHLIST_PAGE_SIZE = 10;
export const useWatchlist = () => {
const toast = useToast();
const dispatch = useDispatch();
const [watchlistQuotes, setWatchlistQuotes] = useState([]);
const [watchlistLoading, setWatchlistLoading] = useState(false);
const [watchlistPage, setWatchlistPage] = useState(1);
const [followingEvents, setFollowingEvents] = useState([]);
// 从 Redux 获取自选股数据（与 GlobalSidebar 共用）
const watchlistQuotes = useSelector(state => state.stock.watchlistQuotes || []);
const watchlistLoading = useSelector(state => state.stock.loading?.watchlistQuotes || false);
// 从 Redux 获取自选股列表长度（用于监听变化）
// 使用 length 作为依赖，避免数组引用变化导致不必要的重新渲染
const reduxWatchlistLength = useSelector(state => state.stock.watchlist?.length || 0);
// 检查 Redux watchlist 是否已初始化（加载状态）
const reduxWatchlistLoading = useSelector(state => state.stock.loading?.watchlist);
// 用于跟踪上一次的 watchlist 长度
const prevWatchlistLengthRef = useRef(-1); // 初始设为 -1，确保第一次变化也能检测到
const prevWatchlistLengthRef = useRef(-1);
// 初始化时加载 Redux watchlist（确保 Redux 状态被初始化）
const hasInitializedRef = useRef(false);
@@ -56,35 +58,11 @@ export const useWatchlist = () => {
}
}, [dispatch]);
// 加载自选股实时行情
const loadWatchlistQuotes = useCallback(async () => {
try {
setWatchlistLoading(true);
const base = getApiBase();
const resp = await fetch(base + '/api/account/watchlist/realtime', {
credentials: 'include',
cache: 'no-store'
});
if (resp.ok) {
const data = await resp.json();
if (data && data.success && Array.isArray(data.data)) {
setWatchlistQuotes(data.data);
logger.debug('useWatchlist', '自选股行情加载成功', { count: data.data.length });
} else {
setWatchlistQuotes([]);
}
} else {
setWatchlistQuotes([]);
}
} catch (e) {
logger.warn('useWatchlist', '加载自选股实时行情失败', {
error: e.message
});
setWatchlistQuotes([]);
} finally {
setWatchlistLoading(false);
}
}, []);
// 加载自选股实时行情（通过 Redux）
const loadWatchlistQuotesFunc = useCallback(() => {
logger.debug('useWatchlist', '触发 loadWatchlistQuotes');
dispatch(loadWatchlistQuotes());
}, [dispatch]);
// 监听 Redux watchlist 长度变化，自动刷新行情数据
useEffect(() => {
@@ -102,7 +80,7 @@ export const useWatchlist = () => {
// 延迟一小段时间再刷新，确保后端数据已更新
const timer = setTimeout(() => {
logger.debug('useWatchlist', '执行 loadWatchlistQuotes');
loadWatchlistQuotes();
dispatch(loadWatchlistQuotes());
}, 500);
prevWatchlistLengthRef.current = currentLength;
@@ -111,66 +89,53 @@ export const useWatchlist = () => {
// 更新 ref
prevWatchlistLengthRef.current = currentLength;
}, [reduxWatchlistLength, loadWatchlistQuotes]);
}, [reduxWatchlistLength, dispatch]);
// 添加到自选股
// 添加到自选股（通过 Redux）
const handleAddToWatchlist = useCallback(async (stockCode, stockName) => {
try {
const base = getApiBase();
const resp = await fetch(base + '/api/account/watchlist', {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ stock_code: stockCode, stock_name: stockName })
});
const data = await resp.json().catch(() => ({}));
if (resp.ok && data.success) {
// 刷新自选股列表
loadWatchlistQuotes();
// 通过 Redux action 添加（乐观更新）
await dispatch(toggleWatchlistAction({
stockCode,
stockName,
isInWatchlist: false // 表示当前不在自选股中，需要添加
})).unwrap();
// 刷新行情
dispatch(loadWatchlistQuotes());
toast({ title: '已添加至自选股', status: 'success', duration: 1500 });
return true;
} else {
toast({ title: '添加失败', status: 'error', duration: 2000 });
return false;
}
} catch (e) {
toast({ title: '网络错误，添加失败', status: 'error', duration: 2000 });
logger.error('useWatchlist', '添加自选股失败', e);
toast({ title: e.message || '添加失败', status: 'error', duration: 2000 });
return false;
}
}, [toast, loadWatchlistQuotes]);
}, [dispatch, toast]);
// 从自选股移除
// 从自选股移除（通过 Redux）
const handleRemoveFromWatchlist = useCallback(async (stockCode) => {
try {
// 找到股票名称
const stockItem = watchlistQuotes.find(item => {
const normalize6 = (code) => {
const m = String(code || '').match(/(\d{6})/);
return m ? m[1] : String(code || '');
};
return normalize6(item.stock_code) === normalize6(stockCode);
});
const stockItem = watchlistQuotes.find(item =>
normalize6(item.stock_code) === normalize6(stockCode)
);
const stockName = stockItem?.stock_name || '';
// 通过 Redux action 移除（会同步更新 Redux 状态）
// 通过 Redux action 移除（乐观更新）
await dispatch(toggleWatchlistAction({
stockCode,
stockName,
isInWatchlist: true // 表示当前在自选股中，需要移除
})).unwrap();
// 更新本地状态（立即响应 UI）
setWatchlistQuotes((prev) => {
const normalize6 = (code) => {
const m = String(code || '').match(/(\d{6})/);
return m ? m[1] : String(code || '');
};
const target = normalize6(stockCode);
const updated = (prev || []).filter((x) => normalize6(x.stock_code) !== target);
const newMaxPage = Math.max(1, Math.ceil((updated.length || 0) / WATCHLIST_PAGE_SIZE));
setWatchlistPage((p) => Math.min(p, newMaxPage));
return updated;
});
// 更新分页（如果当前页超出范围）
const newLength = watchlistQuotes.length - 1;
const newMaxPage = Math.max(1, Math.ceil(newLength / WATCHLIST_PAGE_SIZE));
setWatchlistPage(p => Math.min(p, newMaxPage));
toast({ title: '已从自选股移除', status: 'info', duration: 1500 });
} catch (e) {
@@ -195,7 +160,7 @@ export const useWatchlist = () => {
watchlistPage,
setWatchlistPage,
WATCHLIST_PAGE_SIZE,
loadWatchlistQuotes,
loadWatchlistQuotes: loadWatchlistQuotesFunc,
followingEvents,
handleAddToWatchlist,
handleRemoveFromWatchlist,

191
src/store/slices/stockSlice.js
View File

@@ -292,6 +292,132 @@ export const loadAllStocks = createAsyncThunk(
}
);
/**
* 加载自选股实时行情
* 用于统一行情刷新，两个面板共用
*/
export const loadWatchlistQuotes = createAsyncThunk(
'stock/loadWatchlistQuotes',
async () => {
logger.debug('stockSlice', 'loadWatchlistQuotes');
try {
const apiBase = getApiBase();
const response = await fetch(`${apiBase}/api/account/watchlist/realtime`, {
credentials: 'include',
cache: 'no-store'
});
const data = await response.json();
if (data.success && Array.isArray(data.data)) {
logger.debug('stockSlice', '自选股行情加载成功', { count: data.data.length });
return data.data;
}
return [];
} catch (error) {
logger.error('stockSlice', 'loadWatchlistQuotes', error);
return [];
}
}
);
/**
* 加载关注事件列表
* 用于统一关注事件数据源，两个面板共用
*/
export const loadFollowingEvents = createAsyncThunk(
'stock/loadFollowingEvents',
async () => {
logger.debug('stockSlice', 'loadFollowingEvents');
try {
const apiBase = getApiBase();
const response = await fetch(`${apiBase}/api/account/events/following`, {
credentials: 'include',
cache: 'no-store'
});
const data = await response.json();
if (data.success && Array.isArray(data.data)) {
// 合并重复的事件（用最新的数据）
const eventMap = new Map();
for (const evt of data.data) {
if (evt && evt.id) {
eventMap.set(evt.id, evt);
}
}
const merged = Array.from(eventMap.values());
// 按创建时间降序排列
if (merged.length > 0 && merged[0].created_at) {
merged.sort((a, b) => new Date(b.created_at || 0) - new Date(a.created_at || 0));
} else {
merged.sort((a, b) => (b.id || 0) - (a.id || 0));
}
logger.debug('stockSlice', '关注事件列表加载成功', { count: merged.length });
return merged;
}
return [];
} catch (error) {
logger.error('stockSlice', 'loadFollowingEvents', error);
return [];
}
}
);
/**
* 加载用户评论列表
*/
export const loadEventComments = createAsyncThunk(
'stock/loadEventComments',
async () => {
logger.debug('stockSlice', 'loadEventComments');
try {
const apiBase = getApiBase();
const response = await fetch(`${apiBase}/api/account/events/posts`, {
credentials: 'include',
cache: 'no-store'
});
const data = await response.json();
if (data.success && Array.isArray(data.data)) {
logger.debug('stockSlice', '用户评论列表加载成功', { count: data.data.length });
return data.data;
}
return [];
} catch (error) {
logger.error('stockSlice', 'loadEventComments', error);
return [];
}
}
);
/**
* 切换关注事件状态（关注/取消关注）
*/
export const toggleFollowEvent = createAsyncThunk(
'stock/toggleFollowEvent',
async ({ eventId, isFollowing }) => {
logger.debug('stockSlice', 'toggleFollowEvent', { eventId, isFollowing });
const apiBase = getApiBase();
const response = await fetch(`${apiBase}/api/events/${eventId}/follow`, {
method: 'POST',
credentials: 'include'
});
const data = await response.json();
if (!response.ok || data.success === false) {
throw new Error(data.error || '操作失败');
}
return { eventId, isFollowing };
}
);
/**
* 切换自选股状态
*/
@@ -359,6 +485,15 @@ const stockSlice = createSlice({
// 自选股列表 [{ stock_code, stock_name }]
watchlist: [],
// 自选股实时行情 [{ stock_code, stock_name, price, change_percent, ... }]
watchlistQuotes: [],
// 关注事件列表 [{ id, title, event_type, ... }]
followingEvents: [],
// 用户评论列表 [{ id, content, event_id, ... }]
eventComments: [],
// 全部股票列表（用于前端模糊搜索）[{ code, name }]
allStocks: [],
@@ -370,6 +505,9 @@ const stockSlice = createSlice({
historicalEvents: false,
chainAnalysis: false,
watchlist: false,
watchlistQuotes: false,
followingEvents: false,
eventComments: false,
allStocks: false
},
@@ -517,6 +655,18 @@ const stockSlice = createSlice({
state.loading.watchlist = false;
})
// ===== loadWatchlistQuotes =====
.addCase(loadWatchlistQuotes.pending, (state) => {
state.loading.watchlistQuotes = true;
})
.addCase(loadWatchlistQuotes.fulfilled, (state, action) => {
state.watchlistQuotes = action.payload;
state.loading.watchlistQuotes = false;
})
.addCase(loadWatchlistQuotes.rejected, (state) => {
state.loading.watchlistQuotes = false;
})
// ===== loadAllStocks =====
.addCase(loadAllStocks.pending, (state) => {
state.loading.allStocks = true;
@@ -563,6 +713,47 @@ const stockSlice = createSlice({
.addCase(toggleWatchlist.fulfilled, (state) => {
// 状态已在 pending 时更新，这里同步到 localStorage
saveWatchlistToCache(state.watchlist);
})
// ===== loadFollowingEvents =====
.addCase(loadFollowingEvents.pending, (state) => {
state.loading.followingEvents = true;
})
.addCase(loadFollowingEvents.fulfilled, (state, action) => {
state.followingEvents = action.payload;
state.loading.followingEvents = false;
})
.addCase(loadFollowingEvents.rejected, (state) => {
state.loading.followingEvents = false;
})
// ===== loadEventComments =====
.addCase(loadEventComments.pending, (state) => {
state.loading.eventComments = true;
})
.addCase(loadEventComments.fulfilled, (state, action) => {
state.eventComments = action.payload;
state.loading.eventComments = false;
})
.addCase(loadEventComments.rejected, (state) => {
state.loading.eventComments = false;
})
// ===== toggleFollowEvent（乐观更新）=====
// pending: 立即更新状态
.addCase(toggleFollowEvent.pending, (state, action) => {
const { eventId, isFollowing } = action.meta.arg;
if (isFollowing) {
// 当前已关注，取消关注 → 移除
state.followingEvents = state.followingEvents.filter(evt => evt.id !== eventId);
}
// 添加关注的情况需要事件完整数据，不在这里处理
})
// rejected: 回滚状态（仅取消关注需要回滚）
.addCase(toggleFollowEvent.rejected, (state, action) => {
// 取消关注失败时，需要刷新列表恢复数据
// 由于没有原始事件数据，这里只能触发重新加载
logger.warn('stockSlice', 'toggleFollowEvent rejected, 需要重新加载关注事件列表');
});
}
});