Это было задание, которое я получил в рамках процесса собеседования.

Эта статья разделена на две части. В первой части мы создадим приложение Quiz с компонентами класса, а во второй части мы переместим его в функциональную композицию.

Код можно скачать по этой ссылке github.

Обзор приложения

На каждый вопрос будет четыре варианта ответа. Пользователь может пропустить или отправить вопрос. Там будет таймер 20 секунд для каждого вопроса. После последнего вопроса мы покажем ответы на все вопросы в табличном формате.

Начиная.

Мы можем создать новый проект React, используя приведенную ниже команду (обычно я настраиваю свой проект React вручную, настраивая Webpack, но здесь это не имеет никакого значения). Откройте терминал, перейдите в папку, в которой вы хотите настроить свой проект, и выполните команду ниже:

npx create-react-app quiz-app

После выполнения вышеуказанной команды откройте папку quiz-app в vs code (или любом другом редакторе по вашему выбору).

Мы разделим наше приложение на следующую структуру:

  1. Мы разделили Контейнер вопросов на несколько более мелких компонентов TitleCard: покажет вопрос.
    OptionsList: компонент, который создаст список OptionCard. strong> компонент.
    Нижний колонтитул: компонент, который будет отображать кнопки «Пропустить» и «Отправить».
    QuestionCard: компонент, который будет охватывать все вышеперечисленные компоненты.
  2. Таймер: компонент, который показывает таймер и по истечении времени переходит к следующему вопросу.
  3. AnswerContainer: компонент, который будет отображать все вопросы и ответы на них в табличном формате.

Настройка магазина Redux

Поскольку это очень маленькое приложение с ограниченными действиями, одного файла для редукторов будет достаточно.

Запустите команду ниже для установки redux и react-redux:

 npm install redux react-redux

Давайте настроим наш магазин в App.js, ниже файл App.js после настройки нашего магазина:

Наше состояние приложения состоит из следующих частей:

  1. appData : список вопросов для викторины, а также варианты ответов и правильный ответ.
  2. answerInfo : Список всех вопросов с записанными ответами.
  3. questionIndex : показывается индекс текущего вопроса
  4. currentQuestion : отображается текущий вопрос, который обновляется с выбранной опцией для различных действий в нашем редюсере.

Теперь давайте посмотрим на наш файл редуктора. Всего в нашем приложении есть четыре действия:

Действия довольно просты:

Далее наш создатель действий, который будет выглядеть следующим образом:

Теперь мы закончили с настройкой наших редукторов и действий.

Перейдем к нашим компонентам. Мы начнем с нашего компонента QuestionCard.

Карточка Вопроса

Это компонент, который выполняет большую часть тяжелой работы:

Это подпишется на appData и questionIndex из состояния хранилища избыточности с помощью mapStateToProps.
Он также будет импортировать действия loadQuiz, skipQuestion и submitQuestion.

В методе жизненного цикла componentDidMount мы будем вызывать действие loadQuiz. Здесь мы не используем какой-либо API для загрузки вопроса, поскольку мы жестко запрограммировали вопросы в файле создателя действия.

Мы передаем два других действия в качестве реквизита компоненту нижнего колонтитула, который будет обрабатывать действия кнопок пропуска и отправки.

Таймер

Теперь давайте взглянем на компонент таймера:
У каждого вопроса будет 20 секунд, прежде чем он перейдет к следующему вопросу.
Как только таймер достигнет 0, мы вызовем действие skipQuestion, которое переместит индекс вопроса на 1. , что приведет к обновлению компонента QuestionCard.

Теперь QuestionCard снова отобразится с новым вопросом.

Настроим таймер в событии componentDidMount и очистим интервал в событии componentWillUnmount.

Это для загрузки вопросов, пропуска вопроса или отправки вопросов. Как только мы закончим с последним вопросом, мы покажем таблицу с результатами.

Пройдемся по нашему объекту appState

  1. Когда мы загружаем наше приложение, вот как будет выглядеть наше состояние приложения:
initialState = {
   showResults:false,
   answerInfo:{}
};

2. Будет запущено событие ComponentDidMount, которое, в свою очередь, вызовет действие loadQuiz, это изменит наше состояние приложения, чтобы оно выглядело примерно так:

appState = {
   showResults:false,
   answerInfo:{},
   appData: [ list of all my questions],
   questionIndex:0
}

3. Компонент QuestionCard повторно отобразит и покажет первый вопрос. Теперь давайте выберем один из вариантов, который изменит состояние нашего приложения, чтобы оно выглядело так:

appState = {
   showResults:false,
   answerInfo:{},
   appData: [ list of all my questions],
   questionIndex:0,
   currentQuestion : { 'questionIndex':'selected option Index'}
}

4. После выбора опции мы можем либо пропустить, либо отправить вопрос.
Если мы пропустим вопрос, questionIndex будет увеличен на 1, а currentQuestion будет очищен.

appState = {
   showResults:false,
   answerInfo:{},
   appData: [ list of all my questions],
   questionIndex:1,
   currentQuestion : {}
}

Если мы отправим вопрос после шага 3, то appState будет выглядеть примерно так:

appState = {
   showResults:false,
   answerInfo:[{ 'questionIndex':'selected option Index'}],
   appData: [ list of all my questions],
   questionIndex:1,
   currentQuestion : {}
}

Спасибо за чтение

Если вы нашли эту статью полезной, не стесняйтесь аплодировать или поделиться ею с другими.

Это моя первая статья на Medium. Пожалуйста, дайте мне знать, что я могу сделать, чтобы улучшить свое письмо в комментариях.