useContext хичээлийн жишээн дээр useReducer хукийн ажиллагааг судлая. Та redux -ийг ашиглаж байсан бол useReducer -ийн ажиллагааны зарчмыг ойлгоход хөнгөн. useReducer -ийн ажиллагааны санаа useState -ийнхтэй төстэй ч гадаад функцийн тусламжтайгаар компонентийн төлвийн өөрчлөлтийг хийдэгт оршино. useReducer -ийг ашиглан мэдээллийг нээх, хаах ажиллагааны логикийг өөрчлөн бичье.

Хичээлээр хэрэглэгч сорилгын асуултын хариугаар сонгосон хувилбарын шалгалтын логикийн боловсруулалтыг хийе. Шалгалтыг Quiz компонентийн onAnswerClickHandler аргад

  const onAnswerClickHandler = (answerId) => {
    console.log("Хариултын Id:", answerId);
    if (quiz[activeQuestion].rightAnswerId === answerId) {
      const timeout = window.setTimeout(() => {
        if (isQuizFinished()) {
          console.log("Finished");
        } else {
          setActiveQuestion(activeQuestion + 1)      
        }
        window.clearTimeout(timeout);
      }, 1000);
    } else {
      
    }        
  };

  const isQuizFinished = () => {
    return activeQuestion === quiz.length - 1
  }

гэж хэрэгжүүлье. Дэлгэц дээрх асуулт бол quiz массивийн activeQuestion индекстэй элемент бөгөөд rightAnswerId талбарт зөв хариултын дугаар байгаа. Энэ утгыг onAnswerClickHandler функцэд параметрээр ирсэн answerId /хэрэглэгч сонгосон хариултын id/ -тэй тэнцэж буйг шалгана.

Асуултын хариултыг үзүүлэх компонентийг Хариултын хувилбарууд хичээлээр хэрэгжүүлэхдээ Quiz компонентийн quiz массивт зөвхөн хариулт хэсгийг тодорхойлоод асуултыг ActiveQuiz компонентод статик байдлаар тавин өгсөн байгаа. Одоо сорилгын төлвийн quiz массивийг бүрэн хэмжээний болгох ажиллагааг хийцгээе. quiz массивт асуултыг оруулая. quiz массивт асуултууд обьектуудийн массив хэлбэрээр тодорхойлогдож байгаа тул

  const [quiz, setQuiz] = useState(
    [      
      {
        question: "Дэлхийд хэдэн улс байдаг вэ?",
        answers: [
          { text: "210", id: 1 },
          { text: "190", id: 2 },
          { text: "250", id: 3 },
          { text: "180", id: 4 },
        ],        
      }
    ])

quiz массивийн обьектод question талбарыг нэмээд түүнд асуултыг оруулсан.

Javascript хэлийг ашиглахгүйгээр сайт зохионо гэдэг бүтэхгүй зүйл гэдэг нь ойлгомжтой. Сайтын хэрэглэгч талын хуудаст олон төрлийн javascript санг ашигладаг байсан бол одоо сайтыг бүгдийг javascript фреймворк ашиглан хийдэг SPA /single page application/ технологийг улам ихээр хэрэглэх болсон. Эдгээрийн нэг болох Vuejs сангийн хичээлүүдийг сайтад нийтэлж байгаа бөгөөд энэ удаад Vue -гийн хувийн тохиргооны обьектод data талбарт обьект тодорхойлж болж байхад яагаад компонентын хувийн тохиргооны обьектод data талбарт функц тодорхойлох ёстойг авч үзье. Компонентууд ямар хэрэгтэй вэ? хичээлийн жишээг