React Redux QUIZ - reactjs

Question

I am trying to make a simple Quiz work with Redux following this example in https://www.codeproject.com/Articles/5130417/Quiz-Application-in-React-Using-Redux . Somehow I think the quizLoad Reducer is not getting the data or isn't even being called correctly.
This is my Reducer:
const QUIZ_LOAD = 'QUIZ_LOAD';
const QUIZ_ANSWER = 'QUIZ_ANSWER';
const QUIZ_SUBMIT = 'QUIZ_SUBMIT';
const PAGER_UPDATE = 'PAGER_UPDATE';
const INITIAL_STATE = {
quiz: {
config: {
'allowBack': false,
'allowReview': false,
'autoMove': true, // if true, it will move to next question automatically when answered.
'duration': 0, // indicates the time in which quiz needs to be completed. 0 means unlimited.
'pageSize': 1,
'requiredAll': false, // indicates if you must answer all the questions before submitting.
'richText': false,
'shuffleQuestions': false,
'shuffleOptions': false,
'showClock': false,
'showPager': true,
'theme': 'none'
},
questions: []
},
mode: 'quiz',
pager: {
index: 0,
size: 1,
count: 1
}
}
export default (state = INITIAL_STATE, action) => {
const { type, payload } = action;
console.log('REDUCERRRRRRRRR')
switch (type) {
case PAGER_UPDATE:
return { ...state, pager: payload, mode: 'quiz' };
case QUIZ_LOAD:
return { ...state, quiz: payload };
case QUIZ_SUBMIT:
return { ...state, mode: payload };
case QUIZ_ANSWER:
return { ...state, quiz: payload };
default:
return state;
}
};
// <<<ACTIONS>>>
export const pagerUpdate = (payload) => {
return {
type: PAGER_UPDATE,
pager: payload,
mode: 'quiz'
};
};
export const quizLoad = (payload) => {
return {
type: QUIZ_LOAD,
quiz: payload
};
};
export const quizSubmit = (payload) => {
return {
type: QUIZ_SUBMIT,
mode: { payload }
};
};
export const quizAnswer = (payload) => {
return {
type: QUIZ_ANSWER,
quiz: { payload }
}
};
This is my component and where I get the error
"Unhandled Rejection (TypeError): Cannot read property 'config' of
undefined eval
C:\Users\Willkommen\Documents\MyPension\REPOs\web-best\src\pages\header\vertragsCheck\index.js:69:6"
import React from "react";
import { connect } from "react-redux";
import Quiz from "./quiz/Quiz";
import {
pagerUpdate,
quizLoad
} from "redux/vertragsCheck/vertragscheckReducer";
import SEOTitle from "components/SEO/seoTitle";
import WavySectionWrapper from "components/Layouts/Containers/wavySectionWrapper/wavySectionWrapper";
import WavyPageTitleWrapper from "components/Sections/WavyPageTitle/WavyPageTitle";
import Button from "components/Button/Button";
import "./vertragsCheckSteps.scss";
const bgMobileImage =
"/images/illustrations/pages/Home/mobile/mobile-phone1.png";
class vertragsCheck extends React.Component {
state = {
// quizes: [
// { id: 'data/myPensionQuiz.json', name: 'VertragsCheck' },
// { id: 'data/myPensionTest.json', name: 'Rente' }
// ],
quizVisible: false,
quizId: "quizApi/quiz.json"
};
pager = {
index: 0,
size: 1,
count: 1
};
componentDidMount() {
this.load(this.state.quizId);
}
load(quizId) {
let url = quizId || this.props.quizId;
fetch(`../${url}`)
.then(res => res.json())
.then(res => {
let quiz = res;
quiz.questions.forEach(q => {
q.options.forEach(o => (o.selected = false));
});
debugger;
console.log("quizCONFIG", this.props.quiz);
quiz.config = Object.assign(this.props.quiz.config || {}, quiz.config);
this.pager.count = quiz.questions.length / this.pager.size;
this.props.onQuizLoad(quiz);
this.props.onPagerUpdate(this.pager);
});
}
// onChange = (e) => {
// this.setState({ quizId: e.target.value });
// this.load(e.target.value);
// }
handleClick = () => {
const { quizVisible } = this.state;
this.setState({ quizVisible: !quizVisible });
};
render() {
const quizVisible = this.state.quizVisible;
if (!quizVisible) {
return (
<WavySectionWrapper vertical>
<SEOTitle page="vertrags-check" />
<WavyPageTitleWrapper>
<div className="flex-container">
<div>
<h1>
Kostenloser <br />
Vertrags-Check
</h1>
<p>
Ist meine bestehender Vertrag zu teuer? <br />
Wie schneidet meine bestehen Altervorsorge ab? <br />
Wir helfen Dir Deine Altervorsorge zu optimieren.
</p>
<Button size="sm" onClick={this.handleClick}>
Jetzt prüfen
</Button>
</div>
<div>
<img src={bgMobileImage} alt="myPension mobile graphic" />
{/* <img
src="/images/background-elements/bg-vertical-section.svg"
/> */}
</div>
</div>
</WavyPageTitleWrapper>
</WavySectionWrapper>
);
} else if (quizVisible) {
return (
<Quiz
quiz={this.state.quiz}
quizId={this.state.quizId}
mode={this.state.mode}
/>
);
}
}
}
const mapStateToProps = state => {
return { ...state.quiz };
};
const mapDispatchToProps = dispatch => ({
onQuizLoad: payload => dispatch({ type: quizLoad, payload }),
onPagerUpdate: payload => dispatch({ type: pagerUpdate, payload })
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(vertragsCheck);
And this is my quiz data in public folder:
{
"id": 1,
"name": "Vertrags-check Quiz",
"description": "Vertrags-check Quiz determines if your actual pension contract is improvable",
"config": {
"showPager": false,
"allowBack": true,
"autoMove": true
},
"questions": [
{
"id": 1010,
"name": "Sind die Effektivkosten höher als 1,5%?",
"questionTypeId": 1,
"options": [
{
"id": 1055,
"questionId": 1010,
"name": "Ja",
"isAnswer": false
},
{
"id": 1056,
"questionId": 1010,
"name": "Nein",
"isAnswer": false
},
{
"id": 1057,
"questionId": 1010,
"name": "Weiß nicht",
"isAnswer": true
}
],
"questionType": {
"id": 1,
"name": "test type",
"isActive": true
}
},
{
"id": 1011,
"name": "Liegt Dein Rentenfaktor unter 27€?",
"questionTypeId": 1,
"options": [
{
"id": 1055,
"questionId": 1010,
"name": "Ja",
"isAnswer": false
},
{
"id": 1056,
"questionId": 1010,
"name": "Nein",
"isAnswer": false
},
{
"id": 1057,
"questionId": 1010,
"name": "Weiß nicht",
"isAnswer": true
}
],
"questionType": {
"id": 1,
"name": "test type",
"isActive": true
}
},
{
"id": 1012,
"name": "Erfolgt die Anlage zu weniger als 80% in Aktien?",
"questionTypeId": 1,
"options": [
{
"id": 1055,
"questionId": 1010,
"name": "Ja",
"isAnswer": false
},
{
"id": 1056,
"questionId": 1010,
"name": "Nein",
"isAnswer": false
},
{
"id": 1057,
"questionId": 1010,
"name": "Weiß nicht",
"isAnswer": true
}
],
"questionType": {
"id": 1,
"name": "test type",
"isActive": true
}
},
{
"id": 1013,
"name": "Ist Deine Rendite geringer als 3% p.A.?",
"questionTypeId": 1,
"options": [
{
"id": 1055,
"questionId": 1010,
"name": "Ja",
"isAnswer": false
},
{
"id": 1056,
"questionId": 1010,
"name": "Nein",
"isAnswer": false
},
{
"id": 1057,
"questionId": 1010,
"name": "Weiß nicht",
"isAnswer": true
}
],
"questionType": {
"id": 1,
"name": "test type",
"isActive": true
}
},
{
"id": 1014,
"name": "Zahlst Du für Flexibilität?",
"questionTypeId": 1,
"options": [
{
"id": 1055,
"questionId": 1010,
"name": "Ja",
"isAnswer": false
},
{
"id": 1056,
"questionId": 1010,
"name": "Nein",
"isAnswer": false
},
{
"id": 1057,
"questionId": 1010,
"name": "Weiß nicht",
"isAnswer": true
}
],
"questionType": {
"id": 1,
"name": "test type",
"isActive": true
}
},
{
"id": 1015,
"name": "Es gibt keine Steuervorteile bei deinem bestehendem Vertrag?",
"questionTypeId": 1,
"options": [
{
"id": 1055,
"questionId": 1010,
"name": "Ja",
"isAnswer": false
},
{
"id": 1056,
"questionId": 1010,
"name": "Nein",
"isAnswer": false
},
{
"id": 1057,
"questionId": 1010,
"name": "Weiß nicht",
"isAnswer": true
}
],
"questionType": {
"id": 1,
"name": "test type",
"isActive": true
}
},
{
"id": 1016,
"name": "Hast Du Deinen Vertrag nach 2005 abgeschlossen?",
"questionTypeId": 1,
"options": [
{
"id": 1055,
"questionId": 1010,
"name": "Ja",
"isAnswer": false
},
{
"id": 1056,
"questionId": 1010,
"name": "Nein",
"isAnswer": false
},
{
"id": 1057,
"questionId": 1010,
"name": "Weiß nicht",
"isAnswer": true
}
],
"questionType": {
"id": 1,
"name": "test type",
"isActive": true
}
}
]
}

Answer 1

There is problem probably here:
const mapStateToProps = state => { return { ...state.quiz } };
You are using object spread operator, which puts/maps content of the state.quiz into your props. Therefore there isn't any quiz in this.props.
Try to map the state.quiz to this.props.quiz this way:
const mapStateToProps = state => { return { quiz: state.quiz } };
You are also mapping actions to props incorrectly, try this:
const mapDispatchToProps = dispatch => ({
onQuizLoad: payload => dispatch(quizLoad(payload)),
onPagerUpdate: payload => dispatch(pagerUpdate(payload))
});