🧩 23. useReducer & 상태 머신: 복잡한 상태 로직의 해방

// ❌ 연관 상태를 각각 useState로 관리 → 동기화 버그 시한폭탄
function PostEditor() {
  const [content, setContent] = useState('');
  const [isSaving, setIsSaving] = useState(false);
  const [isSaved, setIsSaved] = useState(false);
  const [isError, setIsError] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
  const handleSave = async () => {
    setIsSaving(true);
    setIsSaved(false);   // 💣 깜빡 잊으면 이전 "저장됨"이 남아있음
    setIsError(false);   // 💣 깜빡 잊으면 이전 에러가 화면에 남음
    setErrorMessage(null);
 
    try {
      await savePost(content);
      setIsSaved(true);
      setIsSaving(false);  // 💣 위 줄에서 예외 나면 이 줄 실행 안 됨 → isSaving 영원히 true
    } catch (e) {
      setIsError(true);
      setErrorMessage(e.message);
      setIsSaving(false);
    }
  };
 
  // 😱 발생 가능한 불가능한 조합들:
  // isSaving=true  && isSaved=true   → 저장 중인데 동시에 저장됨? 논리 오류
  // isSaved=true   && isError=true   → 저장됐는데 동시에 오류? 논리 오류
  // isSaving=false && isSaved=false  && isError=false → 아무것도 아닌 상태? (초기 상태와 구분 불가)
}

import { useReducer } from 'react';
 
// 1️⃣ State 타입 정의
type CounterState = {
  count: number;
};
 
// 2️⃣ Action 타입 정의 (어떤 이벤트가 발생할 수 있는가)
type CounterAction =
  | { type: 'INCREMENT' }
  | { type: 'DECREMENT' }
  | { type: 'RESET' }
  | { type: 'SET'; payload: number }; // 특정 값으로 설정
 
// 3️⃣ Reducer 함수 (순수 함수: 같은 입력 → 항상 같은 출력)
function counterReducer(state: CounterState, action: CounterAction): CounterState {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };     // 새 객체 반환 (불변성 유지!)
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 };
    case 'SET':
      return { count: action.payload };       // payload로 전달된 값 사용
    default:
      return state; // 알 수 없는 action은 현재 상태 그대로 반환
  }
}
 
// 4️⃣ 컴포넌트에서 사용
function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
 
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>리셋</button>
      <button onClick={() => dispatch({ type: 'SET', payload: 100 })}>100으로</button>
    </div>
  );
}

// ✅ 좋은 Reducer: 순수 함수
function goodReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.payload] }; // 새 배열 생성
    default:
      return state;
  }
}
 
// ❌ 나쁜 Reducer: 사이드 이펙트 포함
function badReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      state.items.push(action.payload); // 💣 원본 배열 직접 변경 → 리렌더링 안 됨!
      return state;
    case 'FETCH':
      fetch('/api/data'); // 💣 Reducer 안에서 API 호출 → 절대 금지!
      return state;
  }
}

// ✅ useReducer로 게시글 에디터 상태 머신화
 
// 1️⃣ 불가능한 조합이 없는 단일 status 타입
type EditorStatus = 'idle' | 'saving' | 'saved' | 'error';
 
type EditorState = {
  content: string;
  status: EditorStatus;       // 단 하나의 상태만 가능 (동시 2개 불가!)
  errorMessage: string | null;
};
 
type EditorAction =
  | { type: 'CHANGE_CONTENT'; payload: string }
  | { type: 'SAVE_START' }
  | { type: 'SAVE_SUCCESS' }
  | { type: 'SAVE_ERROR'; payload: string };
 
function editorReducer(state: EditorState, action: EditorAction): EditorState {
  switch (action.type) {
    case 'CHANGE_CONTENT':
      // 내용 변경 시 저장됨 상태 초기화
      return { ...state, content: action.payload, status: 'idle' };
 
    case 'SAVE_START':
      // 저장 시작: status 하나만 바꾸면 모든 연관 상태가 일관성 유지
      return { ...state, status: 'saving', errorMessage: null };
 
    case 'SAVE_SUCCESS':
      return { ...state, status: 'saved' };
 
    case 'SAVE_ERROR':
      return { ...state, status: 'error', errorMessage: action.payload };
 
    default:
      return state;
  }
}
 
// 2️⃣ 컴포넌트는 dispatch만 호출, 상태 전환 로직은 reducer에만 존재
function PostEditor() {
  const [state, dispatch] = useReducer(editorReducer, {
    content: '',
    status: 'idle',
    errorMessage: null,
  });
 
  const handleSave = async () => {
    dispatch({ type: 'SAVE_START' }); // 한 줄로 모든 연관 상태 일관성 있게 전환
 
    try {
      await savePost(state.content);
      dispatch({ type: 'SAVE_SUCCESS' });
    } catch (e) {
      dispatch({ type: 'SAVE_ERROR', payload: e.message });
    }
    // isSaving을 false로 바꾸는 걸 깜빡할 수가 없음! reducer가 알아서 처리
  };
 
  return (
    <div>
      <textarea
        value={state.content}
        onChange={e => dispatch({ type: 'CHANGE_CONTENT', payload: e.target.value })}
      />
      <button onClick={handleSave} disabled={state.status === 'saving'}>
        {state.status === 'saving' ? '저장 중...' : '저장'}
      </button>
      {state.status === 'saved' && <span>✅ 저장됨</span>}
      {state.status === 'error' && <span>❌ {state.errorMessage}</span>}
      {/* 'saved'와 'error'가 동시에 표시될 수 없음 — status가 하나이기 때문에! */}
    </div>
  );
}

type CheckoutStatus = 'cart' | 'address' | 'payment' | 'confirming' | 'completed' | 'failed';
 
type CheckoutState = {
  status: CheckoutStatus;
  address: Address | null;
  paymentMethod: PaymentMethod | null;
  errorMessage: string | null;
};
 
type CheckoutAction =
  | { type: 'ADDRESS_SUBMITTED'; payload: Address }
  | { type: 'PAYMENT_METHOD_SELECTED'; payload: PaymentMethod }
  | { type: 'PAYMENT_CONFIRMED' }
  | { type: 'PAYMENT_SUCCEEDED' }
  | { type: 'PAYMENT_FAILED'; payload: string }
  | { type: 'RETRY_PAYMENT' };
 
function checkoutReducer(state: CheckoutState, action: CheckoutAction): CheckoutState {
  // 현재 상태에서 허용된 action만 처리 → 불가능한 전환 자동 차단
  switch (state.status) {
    case 'cart':
      if (action.type === 'ADDRESS_SUBMITTED') {
        return { ...state, status: 'address', address: action.payload };
      }
      break;
 
    case 'address':
      if (action.type === 'PAYMENT_METHOD_SELECTED') {
        return { ...state, status: 'payment', paymentMethod: action.payload };
      }
      break;
 
    case 'payment':
      if (action.type === 'PAYMENT_CONFIRMED') {
        return { ...state, status: 'confirming' };
      }
      break;
 
    case 'confirming':
      if (action.type === 'PAYMENT_SUCCEEDED') {
        return { ...state, status: 'completed' };
      }
      if (action.type === 'PAYMENT_FAILED') {
        return { ...state, status: 'failed', errorMessage: action.payload };
      }
      break;
 
    case 'failed':
      if (action.type === 'RETRY_PAYMENT') {
        return { ...state, status: 'payment', errorMessage: null };
      }
      break;
  }
 
  return state; // 허용되지 않은 action은 무시 → 상태 유지
}

// ✅ Discriminated Union Action 타입
type TodoAction =
  | { type: 'ADD_TODO'; payload: { text: string } }       // ADD는 text 필수
  | { type: 'TOGGLE_TODO'; payload: { id: string } }      // TOGGLE은 id 필수
  | { type: 'DELETE_TODO'; payload: { id: string } }      // DELETE는 id 필수
  | { type: 'CLEAR_ALL' };                                // CLEAR는 payload 없음
 
// TypeScript가 각 case에서 payload 타입을 자동으로 좁혀줌
function todoReducer(state: Todo[], action: TodoAction): Todo[] {
  switch (action.type) {
    case 'ADD_TODO':
      // 여기서 action.payload는 { text: string } 타입으로 자동 추론
      return [...state, { id: crypto.randomUUID(), text: action.payload.text, done: false }];
 
    case 'TOGGLE_TODO':
      // 여기서 action.payload는 { id: string } 타입으로 자동 추론
      return state.map(todo =>
        todo.id === action.payload.id ? { ...todo, done: !todo.done } : todo
      );
 
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.payload.id);
 
    case 'CLEAR_ALL':
      // 여기서 action.payload는 undefined (타입 에러 없음)
      return [];
 
    default:
      // TypeScript: 이 시점에서 action은 never 타입 → 모든 case 처리 보장
      const _exhaustiveCheck: never = action;
      return state;
  }
}

// Action 생성 함수: dispatch 호출 시 타입 오타 방지
const todoActions = {
  addTodo: (text: string): TodoAction => ({ type: 'ADD_TODO', payload: { text } }),
  toggleTodo: (id: string): TodoAction => ({ type: 'TOGGLE_TODO', payload: { id } }),
  deleteTodo: (id: string): TodoAction => ({ type: 'DELETE_TODO', payload: { id } }),
  clearAll: (): TodoAction => ({ type: 'CLEAR_ALL' }),
};
 
// 사용: 문자열 오타 없이 안전하게 dispatch
dispatch(todoActions.addTodo('새 게시글 작성'));
dispatch(todoActions.toggleTodo(postId));

// ✅ 전역 Toast(알림) 시스템 구축
 
// 1️⃣ 타입 정의
type ToastType = 'success' | 'error' | 'info';
type Toast = { id: string; message: string; type: ToastType };
 
type ToastAction =
  | { type: 'ADD'; payload: Omit<Toast, 'id'> }
  | { type: 'REMOVE'; payload: string };       // id 전달
 
// 2️⃣ Context 타입 정의
interface ToastContextValue {
  toasts: Toast[];
  dispatch: React.Dispatch<ToastAction>;
}
 
const ToastContext = createContext<ToastContextValue | null>(null);
 
// 3️⃣ Reducer
function toastReducer(state: Toast[], action: ToastAction): Toast[] {
  switch (action.type) {
    case 'ADD':
      return [
        ...state,
        { ...action.payload, id: crypto.randomUUID() }, // id 자동 생성
      ];
    case 'REMOVE':
      return state.filter(t => t.id !== action.payload);
    default:
      return state;
  }
}
 
// 4️⃣ Provider 컴포넌트
export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toasts, dispatch] = useReducer(toastReducer, []);
 
  return (
    <ToastContext.Provider value={{ toasts, dispatch }}>
      {children}
      <ToastContainer toasts={toasts} dispatch={dispatch} />
    </ToastContext.Provider>
  );
}
 
// 5️⃣ 커스텀 훅으로 편리한 API 제공
export function useToast() {
  const context = useContext(ToastContext);
  if (!context) throw new Error('useToast must be used within ToastProvider');
 
  const { dispatch } = context;
 
  return {
    // dispatch를 직접 노출하지 않고 의미 있는 함수만 제공
    success: (message: string) =>
      dispatch({ type: 'ADD', payload: { message, type: 'success' } }),
    error: (message: string) =>
      dispatch({ type: 'ADD', payload: { message, type: 'error' } }),
    info: (message: string) =>
      dispatch({ type: 'ADD', payload: { message, type: 'info' } }),
    remove: (id: string) =>
      dispatch({ type: 'REMOVE', payload: id }),
  };
}
 
// 6️⃣ 어느 컴포넌트에서든 사용
function SaveButton() {
  const { success, error } = useToast();
 
  const handleSave = async () => {
    try {
      await savePost();
      success('게시글이 저장됐어요!');  // 전역 토스트 표시
    } catch {
      error('저장에 실패했어요. 다시 시도해주세요.');
    }
  };
 
  return <button onClick={handleSave}>저장</button>;
}

// reducer가 원본 배열/객체를 직접 수정함
case 'ADD_ITEM':
  state.items.push(newItem); // 💥 원본 변경 → React가 변경 감지 못 함
  return state; // 같은 참조 반환 → 리렌더링 없음!

case 'ADD_ITEM':
  return { ...state, items: [...state.items, newItem] }; // 새 참조 반환

dispatch({ type: 'SAVE_START' });
console.log(state.status); // 💥 여전히 'idle' 출력! dispatch는 비동기

// dispatch 직후에 state를 쓰지 말고, 다음 렌더에서 사용
dispatch({ type: 'SAVE_START' });
// 이후 로직에서 state.status를 쓰지 않고, action의 의미에 맞게 진행
await savePost(state.content); // state.content는 아직 안 바뀜 → 문제 없음

// 초기 상태 계산이 비싼 경우 (localStorage 읽기 등)
const [state, dispatch] = useReducer(reducer, loadFromLocalStorage()); // 매 렌더마다 실행!

// 세 번째 인자로 초기화 함수 전달 → 최초 한 번만 실행
const [state, dispatch] = useReducer(reducer, null, () => loadFromLocalStorage());

function buggyReducer(state: { items: string[] }, action: { type: 'ADD'; payload: string }) {
  switch (action.type) {
    case 'ADD':
      state.items.push(action.payload); // 1번
      return state;                      // 2번
    default:
      return state;
  }
}