useReducer 以及它与 useState 的不同之处

const [state, setstate] = usestate(initialstate);

const [state, dispatch] = usereducer(reducer, initialstate);

const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

import react, { usestate } from 'react';

export default function counter() {
  const [count, setcount] = usestate(0);

  return (
    <div>
      <p>count: {count}</p>
      <button onclick={() => setcount(count + 1)}>increment</button>
      <button onclick={() => setcount(count - 1)}>decrement</button>
    </div>
  );
}

import react, { usereducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export default function counter() {
  const [state, dispatch] = usereducer(reducer, { count: 0 });

  return (
    <div>
      <p>count: {state.count}</p>
      <button onclick={() => dispatch({ type: 'increment' })}>increment</button>
      <button onclick={() => dispatch({ type: 'decrement' })}>decrement</button>
    </div>
  );
}

import react, { usereducer } from 'react';

const initialstate = {
  name: '',
  email: ''
};

function reducer(state, action) {
  switch (action.type) {
    case 'setname':
      return { ...state, name: action.payload };
    case 'setemail':
      return { ...state, email: action.payload };
    default:
      return state;
  }
}

export default function form() {
  const [state, dispatch] = usereducer(reducer, initialstate);

  return (
    <div>
      <input
        type="text"
        value={state.name}
        onchange={(e) => dispatch({ type: 'setname', payload: e.target.value })}
        placeholder="name"
      />
      <input
        type="email"
        value={state.email}
        onchange={(e) => dispatch({ type: 'setemail', payload: e.target.value })}
        placeholder="email"
      />
      <p>name: {state.name}</p>
      <p>email: {state.email}</p>
    </div>
  );
}

import react, { usereducer } from 'react';

// quiz data with detailed explanations
const quizdata = [
  {
    question: "what hook is used to handle complex state logic in react?",
    options: ["usestate", "usereducer", "useeffect", "usecontext"],
    correct: 1,
    explanation: "usereducer is specifically designed for complex state management scenarios."
  },
  {
    question: "which function updates the state in usereducer?",
    options: ["setstate", "dispatch", "update", "setreducer"],
    correct: 1,
    explanation: "dispatch is the function provided by usereducer to trigger state updates."
  },
  {
    question: "what pattern is usereducer based on?",
    options: ["observer pattern", "redux pattern", "factory pattern", "module pattern"],
    correct: 1,
    explanation: "usereducer is inspired by redux's state management pattern."
  }
];

// initial state with feedback state added
const initialstate = {
  currentquestion: 0,
  score: 0,
  showscore: false,
  selectedoption: null,
  showfeedback: false, // new state for showing answer feedback
};

// enhanced reducer with feedback handling
const reducer = (state, action) => {
  switch (action.type) {
    case 'select_option':
      return {
        ...state,
        selectedoption: action.payload,
        showfeedback: true, // show feedback when option is selected
      };
    case 'next_question':
      const iscorrect = action.payload === quizdata[state.currentquestion].correct;
      const nextquestion = state.currentquestion + 1;
      return {
        ...state,
        score: iscorrect ? state.score + 1 : state.score,
        currentquestion: nextquestion,
        showscore: nextquestion === quizdata.length,
        selectedoption: null,
        showfeedback: false, // reset feedback for next question
      };
    case 'restart':
      return initialstate;
    default:
      return state;
  }
};

const quiz = () => {
  const [state, dispatch] = usereducer(reducer, initialstate);
  const { currentquestion, score, showscore, selectedoption, showfeedback } = state;

  const handleoptionclick = (optionindex) => {
    dispatch({ type: 'select_option', payload: optionindex });
  };

  const handlenext = () => {
    if (selectedoption !== null) {
      dispatch({ type: 'next_question', payload: selectedoption });
    }
  };

  const handlerestart = () => {
    dispatch({ type: 'restart' });
  };

  if (showscore) {
    return (
      <div classname="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
        <div classname="bg-white rounded-lg shadow-lg p-8 max-w-md w-full">
          <h2 classname="text-2xl font-bold text-center mb-4">quiz complete!</h2>
          <p classname="text-xl text-center mb-6">
            your score: {score} out of {quizdata.length}
          </p>
          <button
            onclick={handlerestart}
            classname="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors"
          >
            restart quiz
          </button>
        </div>
      </div>
    );
  }

  const currentquizdata = quizdata[currentquestion];
  const iscorrectanswer = (optionindex) => optionindex === currentquizdata.correct;

  return (
    <div classname="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <div classname="bg-white rounded-lg shadow-lg p-8 max-w-md w-full">
        <div classname="mb-6">
          <p classname="text-sm text-gray-500 mb-2">
            question {currentquestion + 1}/{quizdata.length}
          </p>
          <h2 classname="text-xl font-semibold mb-4">{currentquizdata.question}</h2>
        </div>

        <div classname="space-y-3 mb-6">
          {currentquizdata.options.map((option, index) => {
            let buttonstyle = 'bg-gray-50 hover:bg-gray-100';

            if (showfeedback && selectedoption === index) {
              buttonstyle = iscorrectanswer(index) 
                ? 'bg-green-100 border-2 border-green-500 text-green-700'
                : 'bg-red-100 border-2 border-red-500 text-red-700';
            }

            return (
              <button
                key={index}
                onclick={() => handleoptionclick(index)}
                disabled={showfeedback}
                classname={`w-full p-3 text-left rounded-lg transition-colors ${buttonstyle}`}
              >
                {option}
              </button>
            );
          })}
        </div>

        {showfeedback && (
          <div classname={`p-4 rounded-lg mb-4 ${
            iscorrectanswer(selectedoption)
              ? 'bg-green-50 text-green-800'
              : 'bg-red-50 text-red-800'
          }`}>
            {iscorrectanswer(selectedoption)
              ? "correct! "
              : `incorrect. the correct answer was: ${currentquizdata.options[currentquizdata.correct]}. `}
            {currentquizdata.explanation}
          </div>
        )}

        <button
          onclick={handlenext}
          disabled={!showfeedback}
          classname={`w-full py-2 px-4 rounded transition-colors ${
            !showfeedback
              ? 'bg-gray-300 cursor-not-allowed'
              : 'bg-blue-500 text-white hover:bg-blue-600'
          }`}
        >
          next question
        </button>
      </div>
    </div>
  );
};

export default quiz;

// initial state
const initialstate = {
  currentquestion: 0,
  score: 0,
  showscore: false,
  selectedoption: null,
  showfeedback: false, // new state for feedback
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'select_option':
      return {
        ...state,
        selectedoption: action.payload,
        showfeedback: true, // show feedback immediately
      };
    case 'next_question':
      const iscorrect = action.payload === quizdata[state.currentquestion].correct;
      // ... rest of the logic

let buttonstyle = 'bg-gray-50 hover:bg-gray-100';

if (showfeedback && selectedoption === index) {
  buttonstyle = iscorrectanswer(index) 
    ? 'bg-green-100 border-2 border-green-500 text-green-700'
    : 'bg-red-100 border-2 border-red-500 text-red-700';
}

{showFeedback && (
  <div className={`p-4 rounded-lg mb-4 ${
    isCorrectAnswer(selectedOption)
      ? 'bg-green-50 text-green-800'
      : 'bg-red-50 text-red-800'
  }`}>
    {isCorrectAnswer(selectedOption)
      ? "Correct! "
      : `Incorrect. The correct answer was: ${currentQuizData.options[currentQuizData.correct]}. `}
    {currentQuizData.explanation}
  </div>
)}