[!info] related notes

• 所属 MOC: AI Agent Application MOC
• 相关: Frontend Event Reducer, Event Type

Event Reducer

一句话定义

Event Reducer 是前端将 SSE 事件转化为 UI 状态的纯函数。每种事件类型对应一种状态更新逻辑，确保状态更新可预测、可测试。

核心原理

Reducer 函数

function eventReducer(state: ChatState, event: AgentEvent): ChatState {
  switch (event.event) {
    case 'text_delta':
      return {
        ...state,
        content: state.content + event.data.delta,
        status: 'streaming',
      };

    case 'tool_call_start':
      return {
        ...state,
        toolCalls: [...state.toolCalls, {
          id: event.data.tool_call_id,
          name: event.data.tool_name,
          status: 'running',
        }],
      };

    case 'tool_call_result':
      return {
        ...state,
        toolCalls: state.toolCalls.map(tc =>
          tc.id === event.data.tool_call_id
            ? { ...tc, status: 'done', result: event.data.result }
            : tc
        ),
      };

    case 'done':
      return { ...state, status: 'done' };

    case 'error':
      return { ...state, status: 'error', error: event.data.message };

    default:
      return state;
  }
}

与 React useReducer 集成

function Chat() {
  const [state, dispatch] = useReducer(eventReducer, initialState);

  useEffect(() => {
    const es = new EventSource('/api/chat/stream');
    es.onmessage = (e) => {
      dispatch(JSON.parse(e.data));
    };
    return () => es.close();
  }, []);

  return <ChatUI state={state} />;
}

常见坑

1. Reducer 有副作用: Reducer 应该是纯函数
2. 不处理未知事件: 应该返回原状态而不是报错
3. 状态嵌套太深: 超过 3 层应该拆分

参考资料

• Frontend Event Reducer
• Event Type