My useReducer Learning Journey: From 'What is this?' to Building Real Projects

My useReducer Learning Journey: From "What is this? ' to Building Real Projects.

A few days ago, I couldn't tell you what UseReducer was. Today I have built a TODO list and a Quiz app with it. I want to share exactly how that happened- confusion and all -- because I think a lot of beginners hit the same wall I did.

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

Project 1: Quiz App

import { useReducer, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'
import './App.css'


const Question = [
  {
    Question: "What is the capital of India?",
    Options: ["Mumbai", "Delhi", "Chennai", "Kolkata"],
    answer: "Delhi"
  },
  {
    Question: "Which hook is used for complex state?",
    Options: ["useState", "useReducer", "useEffect", "useRef"],
    answer: "useReducer"
  },
  {
    Question: "React is a",
    Options: ["Library", "Language", "Database", "Frameworks"],
    answer: "Library"
  },
  {
    Question: "What is the longest river in the world?",
    Options: ["Amazon River", "The Nile River", "The Yangtze River", "The Mississippi River"],
    answer: "The Nile River"
  },
    {
    Question: "Which country is home to the most natural lakes in the world?",
    Options: ["Canada", "United States", "Russia", "Australia"],
    answer: "Canada"
  },



];

const initialState = {
  currentQuestion: 0,
  score: 0,
  showResults: false
};



function QuizReducer(state, action) {
  switch (action.type) {
    case "Answer":
      const isCorrect = action.payload === Question[state.currentQuestion].answer;

      return {
        ...state,
        score: isCorrect ? state.score + 1 : state.score,
        currentQuestion: state.currentQuestion + 1

      }



    default:
      return state;

  };
}



function App() {
  const [state, dispatch] = useReducer(QuizReducer, initialState);

  if (state.currentQuestion >= Question.length) {
    return (
      <div>
        <h2>Quiz App</h2>
        <p> Your Score : {state.score} /{Question.length}</p>
      </div>
    );
  }
  const current = Question[state.currentQuestion];

  return (
    <div>
      <h2>Quiz App</h2>
      <h3>{current.Question}</h3>
      {current.Options.map((option) => (
        <button
          key={option}
          onClick={() => dispatch({ type: "Answer", payload: option })}
        >
          {option}
        </button>
      ))}
    </div>
  );

}

export default App

This is the expected output: