// src/hooks/useWatchlist.js // 自选股管理自定义 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'; const WATCHLIST_PAGE_SIZE = 10; /** * 自选股管理 Hook(导航栏专用) * 提供自选股加载、分页、移除等功能 * 监听 Redux 中的 watchlist 变化,自动刷新行情数据 * * @returns {{ * watchlistQuotes: Array, * watchlistLoading: boolean, * watchlistPage: number, * setWatchlistPage: Function, * WATCHLIST_PAGE_SIZE: number, * loadWatchlistQuotes: Function, * followingEvents: Array, * handleAddToWatchlist: Function, * handleRemoveFromWatchlist: Function, * isInWatchlist: Function * }} */ 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 获取自选股列表长度(用于监听变化) // 使用 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,确保第一次变化也能检测到 // 初始化时加载 Redux watchlist(确保 Redux 状态被初始化) const hasInitializedRef = useRef(false); useEffect(() => { if (!hasInitializedRef.current) { hasInitializedRef.current = true; logger.debug('useWatchlist', '初始化 Redux watchlist'); dispatch(loadWatchlist()); } }, [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', headers: { 'Cache-Control': 'no-cache' } }); 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 watchlist 长度变化,自动刷新行情数据 useEffect(() => { const currentLength = reduxWatchlistLength; const prevLength = prevWatchlistLengthRef.current; // 只有当 watchlist 长度发生变化时才刷新 // prevLength = -1 表示初始状态,此时不触发刷新(由菜单打开时触发) if (prevLength !== -1 && currentLength !== prevLength) { logger.debug('useWatchlist', 'Redux watchlist 长度变化,刷新行情', { prevLength, currentLength }); // 延迟一小段时间再刷新,确保后端数据已更新 const timer = setTimeout(() => { logger.debug('useWatchlist', '执行 loadWatchlistQuotes'); loadWatchlistQuotes(); }, 500); prevWatchlistLengthRef.current = currentLength; return () => clearTimeout(timer); } // 更新 ref prevWatchlistLengthRef.current = currentLength; }, [reduxWatchlistLength, loadWatchlistQuotes]); // 添加到自选股 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(); 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 }); return false; } }, [toast, loadWatchlistQuotes]); // 从自选股移除 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 stockName = stockItem?.stock_name || ''; // 通过 Redux action 移除(会同步更新 Redux 状态) 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; }); toast({ title: '已从自选股移除', status: 'info', duration: 1500 }); } catch (e) { logger.error('useWatchlist', '移除自选股失败', e); toast({ title: e.message || '移除失败', status: 'error', duration: 2000 }); } }, [dispatch, watchlistQuotes, toast]); // 判断股票是否在自选股中 const isInWatchlist = useCallback((stockCode) => { const normalize6 = (code) => { const m = String(code || '').match(/(\d{6})/); return m ? m[1] : String(code || ''); }; const target = normalize6(stockCode); return watchlistQuotes.some(item => normalize6(item.stock_code) === target); }, [watchlistQuotes]); return { watchlistQuotes, watchlistLoading, watchlistPage, setWatchlistPage, WATCHLIST_PAGE_SIZE, loadWatchlistQuotes, followingEvents, handleAddToWatchlist, handleRemoveFromWatchlist, isInWatchlist }; };