標註型 PR Review — 行內 diff + margin notes

#142 重構 UserProfile 改用 useReducer 收斂狀態

作者 @example-dev · 3 commits · 等 review

+86 -52 2 files

Blocker · 必修 Major · 強烈建議 Nit · 小毛病 Praise · 寫得好

跳到： #1B #2M #3N #4P #5B #6M #7N

src/components/UserProfile.tsx [ 點此摺疊 / 展開 ]

@@ -12,18 +12,32 @@ export function UserProfile({ userId })
1212export function UserProfile({ userId }: Props) {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [state, dispatch] = useReducer(profileReducer, initialState);
1614
useEffect(() => {
  setLoading(true);
  dispatch({ type: 'FETCH_START' });
  fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(data => { setUser(data); setLoading(false); })
    .catch(err => { setError(err.message); setLoading(false); });
    .then(data => dispatch({ type: 'FETCH_OK', data }))
    .catch(err => dispatch({ type: 'FETCH_ERR', error: err.message }));
}, [userId]);
2422
if (state.status === 'loading') return <Skeleton />;
if (state.status === 'error') return <ErrorBox msg={state.error} />;
return <ProfileCard user={state.user} />;
2626}

Major L13

收斂三個 useState 改 useReducer 方向對。但 initialState 沒看到 export、確認一下是不是定義在同檔。建議放最上面、reader 第一眼看到「狀態長什麼樣」再往下看 logic。

Nit L16

'FETCH_START' 這種 string literal 容易拼錯。後面有 8 個 dispatch、考慮抽成 const Actions = { ... } 或用 enum。

Blocker L19

fetch 沒檢查 r.ok、API 回 500 也會走進 FETCH_OK、然後 data 是 error JSON。請加 if (!r.ok) throw new Error(...)。這是回歸測試也沒抓到的 bug、上次線上爆過一次。

Praise L23

early return 三狀態這寫法很乾淨、比 ternary 巢狀好讀。沿用到其他 component。

src/components/profileReducer.ts [ 點此摺疊 / 展開 ]

@@ -0,0 +1,28 @@ new file
15export type ProfileState =
2  | { status: 'idle' }
3  | { status: 'loading' }
4  | { status: 'ok'; user: User }
5  | { status: 'error'; error: string };
6
76export const initialState: ProfileState = { status: 'idle' };
8
9export function profileReducer(state: ProfileState, action: Action) {
10  switch (action.type) {
11    case 'FETCH_START': return { status: 'loading' };
127    case 'FETCH_OK': return { status: 'ok', user: action.data };
13    case 'FETCH_ERR': return { status: 'error', error: action.error };
14    default: return state;
15  }
16}

Blocker L1

discriminated union 型別寫得好、但 'ok' 跟 component 裡 check 的 'loading' / 'error' 沒一致對齊。component L23 是 state.status === 'loading'、這裡是 'ok' 不是 'success'、容易看漏。建議統一用三字 verb：idle / loading / success / error。

Major L7

initialState 是 'idle'、但 component useEffect 立刻 dispatch FETCH_START、所以 idle 永遠看不到。是設計選擇還是 dead state？如果 idle 永遠走不到、考慮砍掉、讓 type union 從三態起跑。

Nit L12

action.data 沒 type annotation、TypeScript 可能 infer 成 any。建議在 Action type 裡明確標 { type: 'FETCH_OK'; data: User }。

叫 AI 給你一個