Khóa học Frontend NextJS + React

const [state, dispatch] = useReducer(reducer, initialState);

// 1. Định nghĩa kiểu dữ liệu cho State
interface CounterState {
  count: number;
}

// 2. Định nghĩa kiểu dữ liệu cho Actions
// Sử dụng Union Type với 'type' là thuộc tính phân biệt
type CounterAction =
  | { type: 'increment' } // Hành động tăng, không cần thêm dữ liệu
  | { type: 'decrement' } // Hành động giảm, không cần thêm dữ liệu
  | { type: 'reset', payload: number }; // Hành động reset, cần dữ liệu là giá trị mới

// 3. Định nghĩa kiểu dữ liệu và viết hàm Reducer
const 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':
      // TypeScript biết rằng nếu action.type là 'reset', thì action sẽ có payload: number
      return { count: action.payload };
    default:
      // Luôn trả về trạng thái hiện tại nếu hành động không được xử lý
      return state;
  }
};

import React, { useReducer } from 'react';

// ... (Định nghĩa các kiểu CounterState và CounterAction ở trên)
// ... (Viết hàm counterReducer ở trên)

const CounterComponent: React.FC = () => {
  // Sử dụng useReducer với reducer và trạng thái khởi tạo
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Tăng</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Giảm</button>
      <button onClick={() => dispatch({ type: 'reset', payload: 0 })}>Reset về 0</button>
      {/* TypeScript sẽ báo lỗi nếu bạn gửi một hành động không hợp lệ */}
      {/* <button onClick={() => dispatch({ type: 'unknown' })}>Lỗi?</button> */}
      {/* TypeScript cũng báo lỗi nếu bạn gửi hành động reset mà thiếu payload */}
      {/* <button onClick={() => dispatch({ type: 'reset' })}>Lỗi payload?</button> */}
    </div>
  );
};

export default CounterComponent;

import React, { useReducer, ChangeEvent } from 'react';

// 1. Định nghĩa kiểu dữ liệu cho State
interface FormState {
  name: string;
  email: string;
  age: number | ''; // Cho phép rỗng ban đầu
  isSubmitting: boolean;
  error: string | null;
}

// 2. Định nghĩa kiểu dữ liệu cho Actions
// Sử dụng Union Type với thuộc tính 'type'
type FormAction =
  | { type: 'SET_FIELD'; field: keyof FormState; value: any } // Action chung để set giá trị cho một trường
  | { type: 'SUBMIT_START' } // Bắt đầu submit
  | { type: 'SUBMIT_SUCCESS' } // Submit thành công
  | { type: 'SUBMIT_ERROR'; payload: string } // Submit lỗi, cần thông báo lỗi
  | { type: 'RESET_FORM' }; // Reset form

// Trạng thái khởi tạo
const initialFormState: FormState = {
  name: '',
  email: '',
  age: '',
  isSubmitting: false,
  error: null,
};

// 3. Định nghĩa kiểu dữ liệu và viết hàm Reducer
const formReducer = (state: FormState, action: FormAction): FormState => {
  switch (action.type) {
    case 'SET_FIELD':
      // TypeScript kiểm tra action.field có phải là key hợp lệ của FormState không
      // TypeScript cũng kiểm tra action.value có tương thích với kiểu của trường đó không (đến một mức độ nào đó, 'any' ở đây cần cẩn thận hoặc dùng generic)
      // Để an toàn hơn với 'SET_FIELD', bạn có thể cần action payload chi tiết hơn
      // Ví dụ: action: { type: 'SET_NAME', value: string } | { type: 'SET_EMAIL', value: string } ...
      // Tuy nhiên, cách dùng keyof State như trên là một pattern phổ biến cho form đơn giản
      return {
        ...state,
        [action.field]: action.value,
      };
    case 'SUBMIT_START':
      return {
        ...state,
        isSubmitting: true,
        error: null, // Xóa lỗi cũ khi bắt đầu submit
      };
    case 'SUBMIT_SUCCESS':
      return {
        ...initialFormState, // Reset form về trạng thái ban đầu
        isSubmitting: false, // Dừng submitting
      };
    case 'SUBMIT_ERROR':
      // TypeScript biết action.payload là string
      return {
        ...state,
        isSubmitting: false, // Dừng submitting
        error: action.payload, // Lưu thông báo lỗi
      };
    case 'RESET_FORM':
        return {
            ...initialFormState // Reset form hoàn toàn
        }
    default:
      return state;
  }
};

// Component sử dụng useReducer
const FormComponent: React.FC = () => {
  const [state, dispatch] = useReducer(formReducer, initialFormState);

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value, type } = e.target;
    // Ép kiểu value tùy thuộc vào type của input
    const fieldValue = type === 'number' ? (value === '' ? '' : Number(value)) : value;

    // Dispatch action SET_FIELD
    dispatch({
      type: 'SET_FIELD',
      field: name as keyof FormState, // Ép kiểu tên input thành key của FormState
      value: fieldValue
    });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    dispatch({ type: 'SUBMIT_START' });

    // Giả lập một API call
    try {
      console.log('Submitting:', state);
      await new Promise(resolve => setTimeout(resolve, 1000)); // Chờ 1 giây
      if (state.name === 'error') { // Giả lập lỗi nếu tên là 'error'
         throw new Error('Lỗi từ server!');
      }
      dispatch({ type: 'SUBMIT_SUCCESS' });
      alert('Submit thành công!');
    } catch (err: any) {
      dispatch({ type: 'SUBMIT_ERROR', payload: err.message });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Tên:</label>
        <input
          type="text"
          id="name"
          name="name"
          value={state.name}
          onChange={handleInputChange}
          disabled={state.isSubmitting}
        />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={state.email}
          onChange={handleInputChange}
          disabled={state.isSubmitting}
        />
      </div>
      <div>
        <label htmlFor="age">Tuổi:</label>
        <input
          type="number"
          id="age"
          name="age"
          value={state.age}
          onChange={handleInputChange}
          disabled={state.isSubmitting}
        />
      </div>

      {state.error && <p style={{ color: 'red' }}>Lỗi: {state.error}</p>}

      <button type="submit" disabled={state.isSubmitting}>
        {state.isSubmitting ? 'Đang gửi...' : 'Gửi Form'}
      </button>
       <button type="button" onClick={() => dispatch({ type: 'RESET_FORM' })} disabled={state.isSubmitting}>
        Reset
      </button>
    </form>
  );
};

export default FormComponent;