react-hooks-state

Files (1)

• SKILL.md

SKILL.md (first lines)

# React Hooks 與狀態管理

## 自訂 Hook 設計

封裝可重用邏輯，回傳值與操作函式：

```tsx
import { useState, useEffect, useCallback } from 'react';

interface UseAsyncResult<T> {
  data: T | null;
  error: Error | null;
  loading: boolean;
  execute: () => Promise<void>;
}

export function useAsync<T>(asyncFn: () => Promise<T>): UseAsyncResult<T> {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [loading, setLoading] = useState(false);

  const execute = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await asyncFn();
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err : new Error(String(err)));
    } finally {
      setLoading(false);
    }
  }, [asyncFn]);

  return { data, error, loading, execute };
}
```

## useReducer 管理複雜狀態

多個相關狀態變更用 reducer 集中管理：

```tsx
import { useReducer } from 'react';

interface FormState {
  values: Record<string, string>;
  errors: Record<string, string>;
  isSubmitting: boolean;
}

type FormAction =
  | { type: 'SET_FIELD'; field: string; value: string }
  | { type: 'SET_ERROR'; field: string; error: string }
  | { type: 'CLEAR_ERRORS' }
  | { type: 'SUBMIT_START' }
  | { type: 'SUBMIT_END' };

function formReducer(state: FormState, action: FormAction): FormState {
  switch (action.type) {
    case 'SET_FIELD':
      return {
        ...state,
        values: { ...state.values, [action.field]: action.value },
        errors: { ...state.errors, [action.field]: '' },
      };
    case 'SET_ERROR':
      return {
        ...state,
        errors: { ...state.errors, [action.field]: action.error },
      };
    case 'CLEAR_ERRORS':
      return { ...state, errors: {} };
    case 'SUBMIT_START':
      return { ...state, isSubmitting: true };
    case 'SUBMIT_END':
      return { ...state, isSubmitting: false };
  }
}

export function useForm(initialValues: Record<string, string>) {
  const [state, dispatch] = useReducer(formReducer, {
    values: initialValues,
    errors: {},
    isSubmitting: false,
  });

  const setField = (field: string, value: string) =>
    dispatch({ type: 'SET_FIELD', field, value });

  const setError = (field: string, error: string) =>
    dispatch({ type: 'SET_ERROR', field, error });

  return { ...state, setField, setError, dispatch };
}
```

## Context + Provider 架構

避免 prop drilling，提供型別安全的 Context：

```tsx
import { createContext, useContext, useReducer, type ReactNode } from 'react';

// 1. 定義型別
interface AuthState {
  user: User | null;
  token: string | null;
}

type AuthAction =
  | { type: 'LOGIN'; user: User; token: string }
  | { type: 'LOGOUT' };

interface AuthContextValue {
  state: AuthState;
  login: (user: User, token: string) => void;
  logout: () => void;
}

From vincent119/ai-rules-kit, MIT.

More from vincent119/ai-rules-kit