怎么说呢，

📁 专栏系列：AI 提示词与知识库管理程序

项目技术栈Node.js + Express + 阿里云百炼 + SSE + Zustand 主要目标实现文档自动切片、向量索引建立和智能问答功能。

再看第五篇，前端任务状态管理与实时反馈

适用场景React 前端状态管理、SSE 长连接处理 大神提示本篇主要记录前端如何优雅地处理异步任务轮询。避免重复请求，大神可略过求轻喷 🙏

本篇是 RAG 程序的前端收尾环节。虽接下来端已经实现了状态流转，但如果前端做得不好。很容易出现“重复建立连接”或“内存泄漏”的问题。

主要原因是：Zustand 全局状态去重 + 单例连接控制。

. 主要痛点：如何避免重复请求？

在 SPA中，使用者可能会频繁切换页面或组件重渲染。老实说，如果没有状态管理：

• 使用者点击上传 → 建立 SSE 连接。
• 使用者切到别的页面再切回来 → 组件重新挂载 → 又建立一个新连接。怎么说呢，
• 从结果来看。浏览器同时维持了多个连接在听同一个任务，控制台疯狂打印日志。

方法：

1. Zustand Store用一个全局的 Set 存储所有“正在进行的任务 ID”。
2. 单例模式在请求层判断。如果该 ID 已经在监听中，直接返回，不再建立新连接。

. 主要代码解析

本篇分为两部分：状态定义和连接逻辑。

说到第一部分，状态定义

使用 Set 而不是 Array因为 Set 天然保证唯一性。且 .has 查找速度是 O，比数组的 .includes) 更快。

import { create } from 'zustand';// 类型定义
interface TaskState {
activeTaskIds: Set;actions: {
addTask: => void;removeTask: => void;}，}
const useTaskStore = create => ({
activeTaskIds: new Set,actions: {
addTask: =>
set => {
const newSet = new Set;newSet.add，// 如果已存在Set 会自动忽略
return { activeTaskIds: newSet };}),removeTask: =>
set => {
const newSet = new Set;newSet.delete;return { activeTaskIds: newSet };}),},}))，// 导出 Hook
export { useTaskStore };export const useTaskActions = => useTaskStore => state.actions);export const useActiveTaskIds = => useTaskStore => state.activeTaskIds);

至于第二部分，连接逻辑

listeningTasks 是关键调整点。怎么说呢，Zustand 中的 activeTaskIds 用于 UI 驱动视图更新。而 listeningTasks 用于逻辑层防止重复执行，两者结合才能保证万无一失。

import { message } from "antd";import { useTaskStore } from "@/store";
import { getTaskListAction } from "@/api/rag";话说回来，// 🔑 关键：逻辑层的去重 Set
// Zustand 是为了驱动 UI 更新。这个 Set 是为了防止代码逻辑重复执行
const listeningTasks = new Set;/**
* 启动单个任务的监听器
* @param taskId 任务 ID
*/
export const startTaskListener = async => {
// ✅ 第一层防御：逻辑层去重
// 即使组件多次调用，这里也能拦截住
if ) {
console.log;return，}
listeningTasks.add;console.log，try {
const response = await fetch(`/proxy/api/ragEngine/getFileStatus/${taskId}`,{
说到method，'GET'。headers: {
'Content-Type': 'application/json','Authorization': `Bearer ${localStorage.getItem}`,},});if {
throw new Error;}
const reader = response.body?话说回来，.getReader;按理说，const decoder = new TextDecoder;// ✅ 第二层防御：无限循环读取流
// done 为 true 时才会退出
while {
const { done,value } = await reader.read;if break，const chunk = decoder.decode;其实，const lines = chunk.split;for {
if ) {
const dataStr = line.slice.trim;try {
const parsed = JSON.parse;说起来，console.log;// ✅ 第三层防御：状态判断与清理
// 只有成功或失败才清理，否则一直挂着
if {
message.success;// . 通知 Store 移除任务
useTaskStore.getState.actions.removeTask;// . 退出循环，断开连接
return;}
} catch {
console.warn;}
}
}
}
} catch {
if {
console.log;老实说，} else {
console.error;message.error;}
} finally {
// ✅ 第四层防御：确保清理逻辑层状态
listeningTasks.delete;}
}，/**
* 初始化全局监听器
* 应用启动时调用，恢复上次未完成的任务
*/
export const initGlobalTaskListener = => {
getTaskListAction.n => {
if return;话说回来，// 筛选出还在进行中的任务
const tasks = res.data.filter=>!.includes)，tasks.forEach=>{
// . 先加入 Store，防止页面上的按钮重复点击
useTaskStore.getState.actions.addTask;// . 开启监听
startTaskListener;})，});}，

. 为什么用 Set 而不是 /Array？

. & 建议

💡 ： 至此。我们的 RAG 程序前端状态管理闭环了。从使用者上传文件开始，到后端处理，再到前端实时感知，整个流程已经跑通。

1. 入口调用： 记得在 Main.tsx / App.tsx 或路由守卫中调用 {`initGlobalTaskListener`}.
2. 组件调用： 文件上传成功后依次调用 {`useTaskActions.addTask`} 和 {`startTaskListener`}.

. 获取完整源码提示

`