phase 5 part 1: typescript, vue, react, ssr(Next.js 16) topics with lessons, scenarios, interviews, verified examples

topics/frontend/react/examples/task-panel/taskReducer-demo.ts

@@ -0,0 +1,21 @@
+// 运行：node taskReducer-demo.ts —— 验证乱序 / 重复 / 迟到事件被丢弃，失败后可重试
+import { initialState, taskReducer, type TaskEvent } from "./taskReducer.ts";
+
+const events: TaskEvent[] = [
+  { type: "submitted", id: "T1" },
+  { type: "progress", seq: 1, step: "查询数据", done: false },
+  { type: "progress", seq: 2, step: "查询数据", done: true },
+  { type: "progress", seq: 1, step: "查询数据", done: false }, // 重连后收到的旧事件：丢弃
+  { type: "progress", seq: 3, step: "生成图表", done: true },
+  { type: "succeeded", seq: 4, result: { title: "9 月报表", url: "/reports/9" } },
+  { type: "failed", seq: 5, error: "迟到的失败事件", retryable: false }, // 终态之后：丢弃
+];
+const final = events.reduce(taskReducer, initialState);
+console.log(final.status, final.steps, final.result);
+if (final.status !== "succeeded" || final.steps.length !== 2 || !final.steps.every((x) => x.done)) {
+  throw new Error("断言失败");
+}
+const failed = [{ type: "submitted", id: "T2" }, { type: "failed", seq: 1, error: "超时", retryable: true }, { type: "retry" }]
+  .reduce((st, ev) => taskReducer(st, ev as TaskEvent), initialState);
+if (failed.status !== "queued" || failed.error !== null) throw new Error("断言失败");
+console.log("重试后：", failed.status);