บทช่วย สอนตอบโต้

หน้าแรก แนะนำตัว ตอบสนอง เริ่มต้น ตอบสนอง ES6 React Render HTML ตอบโต้ JSX ส่วนประกอบปฏิกิริยา คลาสตอบโต้ ตอบสนองอุปกรณ์ประกอบฉาก ปฏิกิริยาเหตุการณ์ เงื่อนไขการตอบสนอง รายการตอบโต้ แบบฟอร์มตอบโต้ ตอบสนองเราเตอร์ บันทึกโต้ตอบ ตอบสนอง CSS จัดแต่งทรงผม ตอบสนอง Sass จัดแต่งทรงผม

ตะขอตอบสนอง

ตะขอคืออะไร? ใช้สถานะ ใช้เอฟเฟกต์ ใช้บริบท ใช้Ref ใช้ลด ใช้โทรกลับ ใช้บันทึก ตะขอแบบกำหนดเอง

แบบฝึกหัดตอบโต้

ตอบคำถาม แบบฝึกหัดตอบโต้ ใบรับรองปฏิกิริยา

ตอบสนองuseReducerตะขอ


useReducerตะขอคล้ายกับuseStateตะขอ

อนุญาตให้ใช้ตรรกะสถานะที่กำหนดเอง

หากคุณพบว่าตัวเองกำลังติดตามสถานะหลายๆ ส่วนที่ใช้ตรรกะที่ซับซ้อนuseReducerอาจเป็นประโยชน์


ไวยากรณ์

useReducer Hook ยอมรับสองอาร์กิวเมนต์

useReducer(<reducer>, <initialState>)

ฟังก์ชันreducerนี้ประกอบด้วยตรรกะสถานะที่กำหนดเองของคุณ และinitialStateสามารถเป็นค่าธรรมดาได้ แต่โดยทั่วไปจะมีอ็อบเจ็กต์

useReducerHook คืนค่าปัจจุบันและstateวิธีdispatchการ

นี่คือตัวอย่างuseReducerในแอปเคาน์เตอร์:

ตัวอย่าง:

import { useReducer } from "react";
import ReactDOM from "react-dom";

const initialTodos = [
  {
    id: 1,
    title: "Todo 1",
    complete: false,
  },
  {
    id: 2,
    title: "Todo 2",
    complete: false,
  },
];

const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};

function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos);

  const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id });
  };

  return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  );
}

ReactDOM.render(<Todos />, document.getElementById('root'));


นี่เป็นเพียงตรรกะในการติดตามสถานะที่สมบูรณ์ของสิ่งที่ต้องทำ

ตรรกะทั้งหมดในการเพิ่ม ลบ และทำสิ่งที่ต้องทำให้เสร็จสิ้นสามารถอยู่ภายใน useReducerHook เดียวโดยเพิ่มการดำเนินการเพิ่มเติม