feat: 投资日历自选股功能优化 - Redux 集成 + 乐观更新
- InvestmentCalendar: 集成 Redux 管理自选股状态 - InvestmentCalendar: 添加 isStockInWatchlist 检查,防止重复添加 - InvestmentCalendar: 按钮状态实时切换(加自选/已关注) - stockSlice: 实现乐观更新,pending 时立即更新 UI - stockSlice: rejected 时自动回滚状态并提示错误 - 移除不必要的 loading 状态,提升用户体验 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -440,9 +440,10 @@ const stockSlice = createSlice({
|
||||
state.loading.allStocks = false;
|
||||
})
|
||||
|
||||
// ===== toggleWatchlist =====
|
||||
.addCase(toggleWatchlist.fulfilled, (state, action) => {
|
||||
const { stockCode, stockName, isInWatchlist } = action.payload;
|
||||
// ===== toggleWatchlist(乐观更新)=====
|
||||
// pending: 立即更新状态
|
||||
.addCase(toggleWatchlist.pending, (state, action) => {
|
||||
const { stockCode, stockName, isInWatchlist } = action.meta.arg;
|
||||
if (isInWatchlist) {
|
||||
// 移除
|
||||
state.watchlist = state.watchlist.filter(item => item.stock_code !== stockCode);
|
||||
@@ -453,6 +454,25 @@ const stockSlice = createSlice({
|
||||
state.watchlist.push({ stock_code: stockCode, stock_name: stockName });
|
||||
}
|
||||
}
|
||||
})
|
||||
// rejected: 回滚状态
|
||||
.addCase(toggleWatchlist.rejected, (state, action) => {
|
||||
const { stockCode, stockName, isInWatchlist } = action.meta.arg;
|
||||
// 回滚:与 pending 操作相反
|
||||
if (isInWatchlist) {
|
||||
// 之前移除了,现在加回来
|
||||
const exists = state.watchlist.some(item => item.stock_code === stockCode);
|
||||
if (!exists) {
|
||||
state.watchlist.push({ stock_code: stockCode, stock_name: stockName });
|
||||
}
|
||||
} else {
|
||||
// 之前添加了,现在移除
|
||||
state.watchlist = state.watchlist.filter(item => item.stock_code !== stockCode);
|
||||
}
|
||||
})
|
||||
// fulfilled: 乐观更新模式下状态已在 pending 更新,这里无需操作
|
||||
.addCase(toggleWatchlist.fulfilled, () => {
|
||||
// 状态已在 pending 时更新
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user